所有孩子的CSS Not Selector

Question

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

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

然而，风格继续被应用。 .k-widget 位于包含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()必须应用于li 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的任何项目。如果我正确理解您的问题，您可以通过在:not(.k-widget)之前放置li语句来轻松解决此问题。

Answer 3

问题是父母的:not()选择器会匹配任何父匹配，并且因为所有li元素都在body和html内，所有{ {1}}元素将匹配。

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

li

和

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