CSS兄弟选择器（选择所有兄弟）[重复]答案

【问题标题】：CSS sibling selectors (select all siblings) [duplicate]CSS兄弟选择器（选择所有兄弟）[重复]
【发布时间】：2012-08-02 13:11:19
【问题描述】：

通常，我擅长 CSS，但我似乎无法弄清楚这一点。如果我的结构是

<div>
    <h2 class="open">1</h2>
    <h2>2</h2>
    <h2>3</h2>
    <h2>4</h2>
    <h2>5</h2>
</div>

如何使用 .open 类和 CSS 来定位所有兄弟 h2？我的主要问题是兄弟选择器 (.open + h2) 只会针对紧跟在 .open 之后的 h2。

【问题讨论】：

【解决方案1】：

您可以使用~ 而不是+ 选择以下所有同级：

.open ~ h2

如果您需要选择所有不是.open 的h2 元素，无论它们在.open 之前还是之后，都没有兄弟组合符。您需要改用:not()：

h2:not(.open)

如果您需要将选择限制为div 父母，则可以选择使用子组合器：

div > h2:not(.open)

【讨论】：

好吧，这就是我需要知道的。我也在 .open 类上执行一个函数，所以我只需要做 $('.open').siblings
虽然这篇文章回答了这个问题，但有些人可能还会发现这个答案 (stackoverflow.com/questions/1817792/…) 有助于确认“通用同级选择器”不会针对之前的同级，而只针对后续的同级。
请注意:not(.open) 可以匹配元素，无论.open 是否存在。
@Ruud Lenders：不，不能。 :not(.open) 的全部意义在于不匹配 .open 的元素。如果您说 :not(.open) 作为复合选择器，即没有限定类型选择器，那么 99% of the time the explanation is that it's matching the ancestors of .open that are themselves not .open, and that the .open itself is inheriting styles from those ancestors, thereby giving the false impression that the .open itself is being matched by the selector.
我的意思是它可以匹配元素，而该类不存在于其他元素上，而 .open ~ h2 仅在 .open 本身存在于前一个兄弟元素上时才匹配元素。

【解决方案2】：

我知道这不是您问题的直接答案，但我发现它是一种更有效的选择兄弟姐妹的方法，只需选择父级的所有子级，并为 open 指定一个唯一的类就像你在那里一样。所以代码是：

div h2 { } // apply the style for all "siblings" but really children
div h2.open { } // apply the style or cancel styles from the siblings

这对我很有用，它不需要新的 CSS 规则或任何特殊的东西。

【讨论】：