在 CSS 中选择相邻元素答案

【问题标题】：selecting adjacent elements in CSS在 CSS 中选择相邻元素
【发布时间】：2012-12-26 23:27:44
【问题描述】：

在 CSS 中，

是否可以匹配具有某个属性的元素后跟具有另一个属性的元素，即。

让我们考虑

<div my-custom-attribute="0">
</div>

<div my-custom-attribute="1">
</div>

我想选择所有 my-custom-attribute 等于 0 的元素，然后是 my-custom-attribute 等于 1 的元素

【问题讨论】：

以前的同级选择器还不存在，所以现有的选择器是不可能的。
我最终用 jQuery 和 Javascript 来做这件事。谢谢
请将您的解决方案作为答案发布并接受。您可能会帮助那些偶然发现您的问题的未来访客。

标签： css attributes css-selectors

【解决方案1】：

您可以通过属性选择器以相反的顺序执行此操作

div[my-custom-attribute="0"] > div[my-custom-attribute="1"]

或

<div id="parent">
    <div my-custom-attribute="0">
    </div>
    <div my-custom-attribute="1">
    </div>
</div>

#parent > div[my-custom-attribute]:not(:first-child)

【讨论】：

> 是一个子选择器，它不会做任何有用的事情。第二种方法不处理my-custom-attribute 的值，而是处理它在兄弟之间的相对位置。

【解决方案2】：

我想这就是你想要的：

div[my-custom-attribute="0"] + div[my-custom-attribute="1"] { 
  color:red;
}

DEMO

有关选择器的更多信息，请参阅此link。

【讨论】：

感谢您的回答。由于每个 div 都可以有孩子，所以这个解决方案不起作用。

【解决方案3】：

感谢您的回答。我最终使用了 jQuery 选择器而不是 CSS。

就我而言，jQuery prev() 有效

$($('div[my-custom-attribute="1"]').prev('div[my-custom-attribute="0"]'))

【讨论】：