如何忽略全局css？

Question

I have a html page with div like below.

<div id="container">/* lots of nested html with elements like div, ul, li etc */</div>

Above html page also has lots of other html elements outside of the above div. Now, we have a global css file like style.css which is included in each html file. It has a css rule like following.

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

Now, i do not want these rules to be applied to any of the elements in the following div.

<div id="container">/* lots of nested html with elements like div, ul, li etc */</div>

Css rules should be applied to rest of the stuff in the html.

How should I do this?

Answer 1

It's quite easy, you can combine the effects of :not and :is CSS selectors. Here is a working example.

 :is(body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td):not(#container *) { margin: 0; padding: 0; }

 <div id="container"> <ul> <li>Inside</li> <li>The</li> <li>Container</li> </ul> </div> <ul> <li>Outside</li> <li>The</li> <li>Container</li> </ul>

Run the snippet and you can see that the styles aren't applied to the list inside the container. What's happening here is that we're selecting all those elements with the :is selector and then deselecting all the children of the #container using the :not selector.