CSS中的意思是什么？

Question

此CSS规则中的+是什么意思？

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

Answer 1

+是adjacent sibling combinator。

这意味着选择器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将使用general sibling combinator代替。

3. 未选中
   此p位于blockquote内，并且在引号内没有h2以满足其选择器。

Answer 2

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

它选择直接位于h2标签旁边的所有P标签。然后给它上述属性。

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