CSS中的+是啥意思？ [复制]

Posted 2023-03-06

【中文标题】CSS中的+是啥意思？ [复制]

【英文标题】：What does + mean in CSS? [duplicate]CSS中的+是什么意思？ [复制]

【发布时间】：2011-03-23 20:43:26

【问题描述】：

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

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

【参考方案1】：

+ 是adjacent sibling combinator。

这意味着选择器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>

什么被选中，什么没被选中：

已选择 这个p 紧跟在第一个h2 之后。

未选择 这个p 出现在第一个p 之后，而不是h2。因为它没有紧跟h2，所以没有被选中。

但是，由于它仍然跟随h2 元素，只是不是立即，选择器h2 + p 不会匹配此元素，但h2 ~ p 将使用general sibling combinator 代替。

未选择 这个p 位于blockquote 内，并且在引号内没有h2 来满足它的选择器。

【参考方案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>

...或者这个：

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

【参考方案3】：

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

【讨论】：

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

这个答案模棱两可。它将选择一个直接在 H2 元素之后的 P 元素（不是全部）。

【参考方案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 -->