CSS - 覆盖 CSS 重置答案

【问题标题】：CSS - Overriding CSS ResetCSS - 覆盖 CSS 重置
【发布时间】：2014-01-07 14:58:24
【问题描述】：

问题：margin: 0 auto 在 body 上不起作用。另一方面，background-color: #EEEEEE 正在工作，即使它们位于同一块上。

index.php:

<html>

    <head>
        <title>MForte</title>
        <link rel="stylesheet" type="text/css" href="css/reset.css">
        <link rel="stylesheet" type="text/css" href="css/bodyStyleSheet.css">
    </head>

    <body id="container">
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </body>

</html>

reset.css：

/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
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, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, 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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

bodyStyleSheet.css：

#container {
    margin: 0 auto;
    background-color: #EEEEEE;
}

我尝试过的：

1) 将<link rel="stylesheet" type="text/css" href="css/reset.css"> 和<link rel="stylesheet" type="text/css" href="css/bodyStyleSheet.css"> 相互交换。

2) 从index.php 文件中删除了body 的id，并将#container 替换为body

3) 为了测试场景，由于border: 0 是在reset.css 上声明的，我尝试在index.php 上创建一个包含2 行的table。 border: 1 在 reset.css 的 table 标记中声明。边框未显示。

【问题讨论】：

你没有做任何事情来阻止body 简单地占用整个允许的宽度，所以这就是margin: 0 auto; 不会做任何事情的原因。先修复body的宽度，让它不像html那么宽，你会看到margin在做点什么。
stackoverflow.com/questions/3170772

标签： php html css stylesheet

【解决方案1】：

您的方法是错误的，您试图将body 元素水平居中，该元素的默认width 为100%，因此即使您想将body 水平居中也不能，因为它是100%在width 中，实际上设计师从来没有center body 标签.. 所以如果你愿意，可以在body 元素内嵌套一个容器div，分配一些固定的width，而不是使用margin: 0 auto;。所以改变你的 DOM 就像

<body>
   <div id="container">
   </div>
</body>

#container {
   width: 1000px;
   margin: 0 auto;
}

此外，如果您希望将background 应用于整个视口而不是将background 属性保留在body 元素上，如果您只想将background 用于水平居中的元素而不是移动background #container中的财产

另外，CSS重置与此无关，CSS重置用于重置浏览器样式表应用的默认样式，有些人更喜欢使用通用*选择器重置margin和padding，有些人会重置outline 也喜欢

* {
   margin: 0;
   padding: 0;
   outline: 0;
}

但有些人更喜欢 CSS 重置样式表，它将跨浏览器的差异降至最低。所以您可以选择任何选项。

最后但并非最不重要的是，您正在谈论覆盖，使用重置样式表，那些样式表总是使用最小特异性选择器，使用 class 或 id 将使您的选择器比重置样式表中使用的选择器更具体，所以除非需要，否则不要使用!important，除非你最终会陷入混乱，最好使用特定的选择器。

【讨论】：

嗨，Alien 先生，感谢您的快速回复。为身体设置固定宽度解决了我的问题。另外，感谢您指出其他一些重要因素。最后一个问题，我还尝试在 reset.css 处创建一个表格，设置表格 {} 上的边框大小，但在渲染时未显示。这可能会出什么问题？
@MichaelArdan 编辑了我的答案，不要在body 上使用固定的width，考虑改用容器元素

【解决方案2】：

在 css/bodyStyleSheet.css 中使用 !important

如

#container {
    margin: 0 auto;
    background-color: #EEEEEE !important;
}

这里有关于 Smashing Magazine 的好文章

http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

【讨论】：

为什么要使用!important？
我很抱歉没有在问题中包含使用 if !important，即使我能够尝试它。但谢谢你的时间。 +为此。这可能对其他观众有用。
!important 覆盖了 dom 对象之前的 css 声明，并且还提升了作用域强度。如果我没记错的话（有人纠正我这个问题），如果在 css 文件中使用它也可以覆盖内联 css。
非常感谢迈克尔，同意你的看法 :)
这种方法是不可持续的。你会有很多 !important 直到很难跟踪发生了什么