CSS兄弟选择器（选择所有兄弟姐妹）

Question

通常，我对CSS很好，但我似乎无法想象这一点。如果我有

的结构

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

如何使用带有CSS的.open类来定位所有兄弟h2？我的主要问题是兄弟选择器（.open + h2）只会在.open之后立即定位h2。

Answer 1

您可以使用~代替+选择以下所有兄弟姐妹：

.open ~ h2

如果您需要选择h2以外的所有.open元素，无论它们位于.open之前还是之后，那么就没有兄弟组合。您需要使用:not()代替：

h2:not(.open)

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

div > h2:not(.open)

Answer 2

我知道这不是对你的问题的直接回答，但我发现通过简单地选择父母的所有孩子并指定一个独特的类来选择兄弟姐妹是一种更有效的方法。因为你有它在那里开放。所以代码是：

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

这对我很有用，并且它不需要新的css规则或任何特殊的规则。