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的样式进行一些操作。有没有办法实现这个？

- sadmicrowave

---

CSS中没有“前一个兄弟元素”选择器，所以很可能不行。 - Explosion Pills

你会考虑让被查找的元素也有一个活动类吗？ - ntgCleaner

如果要查找的元素在#box2之后，您可以实现它。正如先前提到的那样，前一个同级选择器不存在（但未来可能会有！）：https://dev59.com/vnI-5IYBdhLWcg3whImk - Pigueiras

Answer 1

在[e-mail]邮件列表中，有多个关于previous-sibling combinator的提案：我的提案 (2012)，另外两个提案 1，2 (2013)。

Tab Atkins通常的回答是：“我们已经有了subject indicator。”对于选择前一个兄弟元素的后代元素（这在使用previous-sibling combinator时非常简单，例如： .example - UL > LI），他建议使用:matches()功能伪类，例如：:matches(!UL + .example) > LI。目前，subject indicator和:matches()都处于草案状态，还不能在现实世界中使用。

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

- Marat Tanalin

Answer 2

如果不了解您的选择器更多信息，您可以使用CSS的:not()选择器。

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

我建议在选择box2时，为您要查找的#element-to-find元素也添加一个类，并准备好相应的样式。

- ntgCleaner