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 }