Question

我有一个包含2个div的页面，并且添加了重置css以删除最初添加到页面的所有浏览器默认值。在第二个div里面我有一些使用浏览器填充的Ul和li。问题是我不希望重置css继承到第二个div。使用reset css重置第二个div剩余元素不应。你能否告诉我如何防止重置css被继承到2nd div。谢谢!!!

     <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

使用classes之类的，

<强> CSS

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

<强> HTML

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

Learn Css和Learn HTML

Answer 2

全局重置的目的是重置所有内容。在某些元素上应用重置但省略其他元素会在不同的浏览器和设备之间产生不一致。

最具语义性的方法是按照您已经完成的方式执行 - 应用全局重置，但随后创建一个新类，它将对您选择的任何元素应用新样式：

.new-class {
    // styles
}

在您的情况下，重新创建旧样式＆＃39;在创建重置之前就已存在 - 这将确保所有浏览器都呈现正确的样式。

了解有关CSS重置的更多信息： Purpose of the CSS reset

Answer 3

只需在元素中添加样式即可。来自id，class或inline样式。只需确保reset.css首先调用新样式即可使用。样式层次结构就像这样。

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

然后使用!important

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

因此，在您的情况下，您可以选择拥有ID，类或内联样式。

<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>

内联样式将是优先考虑的事项。

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

3 个答案: