Что делает +, означают в CSS?

Question

Что делает +, означают в CSS?

Что делает + в этом CSS управляют средний?

h2 + p { 
  font-size: 1.4em; 
  font-weight: bold;
  color: #777; 
}

9

css css-selectors

задан BoltClock 23 February 2012 в 19:24

3 ответа

Он выбирает все p элементы, которые находятся непосредственно после элемента h2 в DOM. Таким образом, следующий элемент p будет стилизован:

<h2>A heading</h2>
<p>This paragraph will be styled.</p>

Но это не будет:

<h2>A heading</h2>
<hr>
<p>This paragraph will NOT be styled.</p>

И это тоже:

<p>This paragraph will NOT be styled.</p>
<h2>A heading</h2>

... или это:

<h2>A heading</h2>
<section>
    <p>This paragraph will NOT be styled.</p>
</section>

4

ответ дан 4 December 2019 в 06:40

он выбирает все теги P, которые находятся непосредственно рядом с тегом h2. Затем присваивает ему указанные атрибуты.

2

ответ дан 4 December 2019 в 06:40

Другие вопросы по тегам:

css css-selectors

Похожие вопросы:

score 29 · Accepted Answer

+ - это комбинатор смежных братьев и сестер.

Это означает, что селектор h2 + p выбирает только p, который идет сразу после h2.

Иллюстрация:

<h2>Headline!</h2>
<p>The first paragraph.</p>  <!-- Selected [1] -->
<p>The second paragraph.</p> <!-- Not selected [2] -->

<h2>Another headline!</h2>
<blockquote>
    <p>A quotation.</p>      <!-- Not selected [3] -->
</blockquote>

Что выбрано, а что нет:

Выбрано
Этот p идет сразу после первого h2.
Не выбран
Этот p идет после первого p, а не после h2. Поскольку он не следует сразу за h2, он не выбран.

Однако, поскольку он все еще следует за элементом h2, просто не сразу, селектор h2 + p не будет соответствовать этому элементу, но h2 ~ p будет, используя вместо этого общий комбинатор сиблингов.
Не выбран
Этот p находится внутри blockquote, и перед ним нет h2 внутри цитаты, чтобы удовлетворить его селектору.