css - CSS 兄弟选择器（选择所有兄弟）

Question

通常，我很擅长 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) 将只针对紧随其后的 h2 .open。

Answer 1

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

.open ~ h2

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

h2:not(.open)

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

div > h2:not(.open)

Answer 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 规则或任何特殊的东西。