如何不将重置CSS文件继承到特定的div？

Question

I have a page with 2 divs and reset css is added to remove all the browser defaults added to the page initially. Inside the 2nd div i have certain Ul and li which uses browser paddings. The problem is i dont want reset css to inherited to the 2nd div. 2nd div remaining elements should not be resetted using reset css. Can you please tell how to prevent reset css being inherited to 2nd div. Thanks !!!

     <style>
        html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
        abbr,acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
        strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, 
    legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
     embed, figure,ul,li,ol,figcaption, footer, header, hgroup, menu, nav, output, ruby, 
      section, summary, time, mark, audio, video {
  margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
        }
      </style>
 <div>
   <ul><li>Reset CSs should be inherited</li></ul>

 </div>
 <div>
   <ul>
      <li>Default browser padding to be added without reset css</li>
    </ul>
 </div>

Answer 1

Use classes like,

CSS

.reset-css{
   /** properties for reset */
}

HTML

<div class="reset-css">
   <ul><li>Reset CSs should be inherited</li></ul>
</div>

Learn Css and Learn HTML

Answer 2

The purpose of the global reset is to reset everything. Applying the reset on some elements but omitting others will create inconsistencies between different browsers and devices.

The most symantic approach is to do as you've already done - apply a global reset, but then create a new class that will apply a new style over whatever element you choose:

.new-class {
    // styles
}

In your case, re-create the 'old style' that was there before the reset was created - this will insure that all browsers will render the correct styling.

Read more about CSS resets: Purpose of the CSS reset

Answer 3

Just put a style in element. Either from id, class or inline style. Just make sure that reset.css is first to call for the new styles to be used. The style hierarchy goes like this.

external stylesheet
class (class="classname")
id (id="elem-id")
inline (style="height: 100px;")

then with !important

external - stylesheet with !important
class - with !important
id - with !important
inline - with !important

So in your case, it's your choice to have an id, class, or put an inline style.

<div>
   <ul><li>Reset CSs should be inherited</li></ul>

 </div>
 <div style="background-color: red; font-size: 12px">
   <ul>
      <li>Default browser padding to be added without reset css</li>
    </ul>
 </div>

the inline style will be the priority.