html - 所有子级的 CSS 非选择器

Question

我正在尝试将样式应用于所有li项目，只要该项目不在具有 .k-widget 类的容器中的任何位置

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

然而，这种风格继续被应用。.k-widget位于一个 div 上，该div 包含包含我不想设置样式的实际li的 div。

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

Answer 1

应该是这样的：

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

当然，正如 Marijke Luttekes 所说，:not()必须在 li 之前的 div 上应用。

还可以查看caniuse 以获取 css3 选择器的浏览器支持。

另一种可能性是告诉.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

当前，列表样式应用于 ali中未应用类的任何项目.k-widget。如果我正确理解您的问题，您可以通过将语句:not(.k-widget)放在li.

Answer 3

问题是，:not()如果任何父项匹配，则父项上的选择器将匹配，并且由于所有li元素都在bodyandhtml中，因此所有li元素都将匹配。

我建议构建两种样式，一种覆盖另一种。

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

和

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