获得前面兄弟的CSS选择器

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邮件列表作为先前兄弟组合子:我的一个(2012年),另1,2(2013).

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

因此,您应该为element-to-find元素添加一个常规类,或者(如果您的active类不是通过JS添加,则更不希望)使用JavaScript来模拟previous-sibling-combinator功能.