CSS選擇器，以獲得兄弟姐妹

是否有任何方式使用純CSS（3）來選擇元素的前一個元素與一個特定的類的元素？CSS選擇器，以獲得兄弟姐妹

即：

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有我想選擇做一些事情來的#element-to-find風格類active。無論如何要完成這個？

來源

2013-05-08 sadmicrowave

在CSS中沒有「以前的兄弟」選擇器，因此可能不是 – 2013-05-08 22:15:35

他們是兄弟姐妹 – Turnip 2013-05-08 22:15:57

您是否考慮讓元素查找還有一個活動類？ – ntgCleaner 2013-05-08 22:17:10

不知道更多的選擇器，你可能會使用CSS的：not（）選擇器。

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

我只想建議給您的#element-to-find類，以及當您選擇BOX2及準備它的樣式。

來源

2013-05-08 22:21:04 ntgCleaner

有多個投標CSSWG在[email protected]郵件列表作爲先前兄弟組合子：my one（2012），另一1，2（2013年）。

Tab Atkins的共同答案就像「我們已經有了這個主題指標」。爲了選擇以前的兄弟姐妹的後代（這對前同胞組合者來說是微不足道的，例如.example - UL > LI），他建議使用:matches()功能僞類， :matches(!UL + .example) > LI。科目指標和:matches()目前都處於草稿狀態，並且不能在現實世界中使用。

因此，您應該爲element-to-find元素添加常規類，或者（如果您的active類不是通過JS添加的，則不太需要）使用JavaScript來模擬以前的兄弟組合功能。

來源

2013-05-08 22:38:12

CSS選擇器，以獲得兄弟姐妹

回答

相關問題