CSS中的加号+代表什么？

Question

这个CSS规则中的+符号是什么意思？

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

- DELETE me

Answer 1

+是相邻兄弟选择器。

这意味着选择器h2 + p只选择紧随在h2后面的p。

下面是一个示例：

<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来满足其选择器。

- BoltClock

Answer 2

它选择在DOM中直接位于h2元素之后的所有p元素。因此，下一个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>

...or this:

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

- You

Answer 3

它选择所有直接位于h2标签旁边的P标签。然后将其赋予所述属性。

- dockeryZ

---

直接在之后，CSS适用于元素，而不是标签。 - You

这个答案有歧义。它将选择紧接在H2元素后面的一个P元素（而不是所有P元素）。 - ase

Answer 4

只影响直接跟在H2后面的第一个p标签

示例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 -->

- user1558952