Что означает + в CSS?

Question

Что означает + в этом правиле CSS?

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

Answer 1

+ - это соседний братский комбинатор .

Это означает, что селектор 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>

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

1. Выбрано
   Это p наступает сразу после первого h2.

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

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

3. Не выбран
   Этот p расположен в пределахblockquote, а внутри кавычки нет h2, чтобы удовлетворить свой селектор.

Answer 2

Выбирает все элементы 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>

Answer 3

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

Answer 4

Влияет только на первую букву p, которая непосредственно следует (идет сразу после) H2

пример 1:

<h2></h2>
<p></p> <!-- THIS ONE IS AFFECTED -->
<p></p> <!-- THIS ONE IS NOT AFFECTED -->
<p></p> <!-- NOR THIS ONE -->
<p></p> <!-- NOR THIS ONE -->
<p></p> <!-- ETC -->

пример 2:

<h2></h2>
<div></div>
<p></p> <!-- THIS ONE IS NOT AFFECTED -->