+在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将使用通用的同级组合器来匹配该元素。

1. 未选择
   这p位于内blockquote，并且h2在引号内没有满足其选择器的内容。