是否可以根據非同級元素的值設置css規則？

說你有這樣的代碼：是否可以根據非同級元素的值設置css規則？

<div class="hello"> 
    <div class="cat dog"/> 
</div> 
<div class="notASibling" />

是有可能設置notASibling的屬性的基礎上，這不是一個兄弟元素的類值？例如，在上面的代碼中，如果hello> cat類是而不是狗，我可能希望將notASibling的顯示屬性設置爲隱藏。

如果notASibling是「貓狗」的兄弟姐妹，我可以簡單地說：

.cat:not(.dog) ~ .notASibling{ display:none; }

來源

2011-08-02 MM.

肯定可能與JavaScript - 但你問的解決方案以外的JavaScript？ – Dave

不能達到純CSS無兄弟姐妹。你可以在JavaScript中做到這一點。如果你想要一個純粹的CSS解決方案，考慮重構你的DOM一點。可能是這樣的：

<div class='dog'> 
    <div class='hello'> 
     <div /> 
    </div> 
    <div class='notASibling' /> 
</div> 


.cat div.notASibling { 
    /* special styles for cats */ 
} 
.dog div.notASibling { 
    /* special styles for dogs */ 
}

來源

2011-08-02 14:33:41 rcravens

這是不可能的CSS。你唯一真正的選擇是使用Javascript。 jQuery庫是根據各地使用增強CSS選擇器選擇元素進行操作的想法，你能做到這一點的位置：

prevWasADog = $(".notASibling").prev().children('.cat').eq(0).is('.dog');

來源

2011-08-02 14:31:41 nickf

答案是否定的。自然，你可能會想到結合子組合子和兄弟組合子，即是這樣的：

.notASibling ~ .hello > .cat:not(.dog) { display: none }

但是，這是不可能的，因爲在CSS 3選擇高清（http://www.w3.org/TR/ css3-selectors /）選擇器只能使用「簡單選擇器序列」作爲操作數的組合器，而不能使用其他選擇器。所以如果你遵循W3C的語法規則，你只能在選擇器中使用一個組合器。

來源

2011-08-02 14:47:31

是否可以根據非同級元素的值設置css規則？

回答

相關問題