3

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

IE：

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. 有没有办法做到这一点？

4

2 回答 2

6

在 www-style@w3.org 的邮件列表中有多个 CSSWG 的提案，作为以前的兄弟组合器：我的一个（2012 年），另一个1、2（2013 年）。

Tab Atkins 的常见回答是“我们已经为此制定了主题指标”。为了选择先前兄弟的后代（这对于先前兄弟的组合器来说是微不足道的，例如.example - UL > LI），他建议使用:matches()功能性伪类，例如:matches(!UL + .example) > LI。主题指标和:matches()当前处于草稿状态，还不能在现实世界中使用。

因此，您应该向元素添加一个常规类，或者（如果您的类不是通过 JS 添加，element-to-find则不太需要）使用 JavaScript 来模拟 previous-sibling-combinator 功能。active

于 2013-05-08T22:38:12.380 回答
2

在不知道更多选择器的情况下，您可能会使用 CSS 的 :not() 选择器。 

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

我只是建议您#element-to-find在选择 box2 并为其准备好样式时也给您上一堂课。

于 2013-05-08T22:21:04.873 回答