Question

有没有办法使用纯CSS（3）来选择一个元素，该元素是具有特定类的元素的前一个兄弟？

即：

HTML：

<div id='element-to-find'></div>
<div id='box1'></div>
<!-- a bunch more DOM elements between here --->
<div id='box2'>
      <div id='inner-box'></div>
</div>

的CSS：

#box1{ /*some styling*/ }
#box2{ /*some styling*/ }

#box2.active .....

现在，当＃box2拥有类active时，我想选择并对#element-to-find的样式执行某些操作。无论如何要实现这个目标吗？

Answer 1

在www-style@w3.org邮件列表中，CSSWG有多个提案，与之前的兄弟组合符有关：my one（2012），另一个1，2（2013）

Tab Atkins的常见答案就像“我们已经有了这个主题指标”。为了选择先前兄弟姐妹的后代（这对于前兄弟组合子来说是微不足道的，例如.example - UL > LI），他建议使用:matches()功能伪类，例如:matches(!UL + .example) > LI。主题指标和:matches()目前都处于草稿状态，尚未在现实世界中使用。

所以你应该在element-to-find元素中添加一个常规类，或者（如果你的active类不是通过JS添加的话，更不希望如此）使用JavaScript来模拟先前的兄弟组合器功能。

Answer 2

不知道你的选择器，你可能会使用CSS的：not（）选择器。

div:not(#box1), div:not(#box2) {
    /*some style here*/
}

我建议您在选择box2时准备好#element-to-find课程并为其准备风格。

获得前面兄弟的CSS选择器

2 个答案: