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位于a中blockquote,并且h2在引号内没有它以满足其选择器.