如何在CSS中組合通配符而不是選擇器

Question

假設您的div處於以下三種可能狀態之一。

<div id="apple" />
<div id="apple" class="expanded" />
<div id="apple" class= "collapsed" />

僅當不存在expand和collapse類時，如何才能顯式地定位#apple div？

我想出的是#apple :not[id$="ed"]但它不起作用。 是否可以將這兩個選擇器組合在一起？

注意：在這種情況下，直接設置#apple的樣式還不夠。 僅當擴展和折疊類不存在時才必須明確選擇。 唯一需要支持的瀏覽器是當前版本的Chrome。

Answer 1

#apple:not(.expanded):not(.collapsed)

但是，具有多個id=apple元素無效。 從技術上講，您也可以這樣做： #apple:not([class~=expanded]):not([class~=collapsed]) 。 更籠統地說，也許#apple:not([class])

Answer 2

#apple:not(.expand):not(.collapsed)將起作用。

Answer 3

使用屬性選擇器[class]可以定位任何類。

由於您想使用:not所以您可以執行以下操作

#apple:not([class])僅在沒有任何類的情況下選擇#apple 。

工作示例：

 #apple:not([class]) { color: red; } 

 <div id="apple">no class</div> <div id="apple" class="expanded">expanded class</div> <div id="apple" class="collapsed">collapsed class</div>