CSS不是所有孩子的选择器

Question

I'm trying to apply a style to all li items as long as that item is not anywhere in a container with a class of .k-widget

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

However the style continues to be applied. The .k-widget is on a div that contain divs that contain the actual li I don't want styled.

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

Answer 1

Should be something like that:

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

Of course the :not() has to be applied on the div which is before the li as allready stated by Marijke Luttekes .

Also have a look at caniuse for browser support of css3 selectors .

Another possibility would be to tell the .k-widget contents to inherit its styles with list-style: inherit; . So you can override it without using a specific value and adding redundance to your styles:

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

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

Answer 2

Currently the list style is applied to any item inside a li that does not have the class .k-widget applied. If I understand your problem correctly, you can easily fix this by placing the statement :not(.k-widget) before li .

Answer 3

The problem is that the :not() selector on a parent will match if any parent matches, and since all li elements are within both body and html , all li elements will match.

I would recommend constructing two styles, one overriding the other.

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

And

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