CSS不是選擇爲所有兒童

Question

我想只要該產品未在任何地方一個容器類.K-widget的

.c-w1 ol li :not(.k-widget) { list-style: decimal outside; } 

但是風格適用於所有李項目風格繼續應用。 .k-widget位於包含div的div上，該div包含實際的li我不想要樣式。

<div class="k-widget"> 
    <Lots of Things> 
     <li> .... 

Answer 1

應該是這樣的：

div:not(.k-widget) .c-w1 ol li { 
    list-style: decimal outside; 
} 

當然:not()有哪個是李as allready stated by Marijke Luttekes前div來應用。

也看看caniuse for browser support of css3 selectors。

另一種可能性是告訴.k-widget內容繼承list-style: inherit;的樣式。所以，你可以重寫它無需使用特定值和添加冗餘到您的樣式：

div .c-w1 ol li { 
    list-style: decimal outside; 
} 

div.k-widget .c-w1 ol li { 
    list-style: inherit; 
} 

Answer 2

目前列表樣式應用到任何項目一li應用類.k-widget不具有內。如果我正確理解您的問題，您可以通過在li之前放置:not(.k-widget)聲明來輕鬆解決此問題。

Answer 3

的問題是，如果任何父匹配:not()選擇器上的父將匹配，並且由於所有li元件都是bodyhtml和，之內的所有li元件將匹配。

我會建議構建兩種風格，一種覆蓋另一種。

.c-w1 ol li { list-style: decimal outside; } 

而且

.c-w1 .k-widget ol li { override style here }