CSS选择器获取前面的兄弟[重复]答案

【问题标题】：CSS selector to get preceding sibling [duplicate]CSS选择器获取前面的兄弟[重复]
【发布时间】：2013-05-03 07:08:46
【问题描述】：

有没有办法使用纯 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 的样式并做一些事情。有没有办法做到这一点？

【问题讨论】：

CSS 中没有“前一个兄弟”选择器，所以可能没有
你会考虑让 element-to-find 也有一个活动类吗？
如果要查找的元素在#box2之后，则可以实现。前面提到的兄弟选择器不存在（还没有！）：stackoverflow.com/questions/1817792/…

标签： css class dom element

【解决方案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 来模拟 previous-sibling-combinator 功能。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：