Overridden CSS Style still effecting element

Question

I have an imported set of CSS styles. One of those styles is the list-style-type: none; that you can see in the screen-shot.

I'm implementing a component right now where I need numbered list items for an <ol> . No big deal, I just write a CSS style that's more specific than the imported style, right?

Except for some reason, even though the imported style is overridden, it's still effecting the list when I load the page, Once I disable it in dev-tools, the numbers appear just how I want them. but dev-tools shows that the imported style is crossed out and shouldn't have any effect in the first place.

How is it, that a CSS style that's clearly being overridden is still somehow effecting the element it's targeting?

Any ideas or insights would be very much appreciated. Thanks!

Answer 1

The style which sets list-style-type: none is applied to ol elements and li elements.

You are overriding it with a more specific selector for the ol element, but the li element has its defaults overridden so doesn't inherit from the parent ol .

This example shows how that works:

 ul, li { list-style-type: none; } ul { list-style-type: number; }.b { list-style-type: inherit; }

 <ul class=list> <li>aaa <li class="b">bbb </ul>