1

我有一个名为 index.html 和 about.html 的页面。我有一个名为 main.css 的 css 文件（由于常见的 css 样式，它在每​​个页面上都使用）和另一个名为 about.css 的 css 文件（它包含 about.html 独有的样式）。

在 main.css 我有这个 css 块：

html, body, form {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

这在 about.html 上产生了问题。在 about.css 中，我该怎么做才能使该页面上的 html、body、表单不使用 margin: 0px;、padding: 0px; 和 height: 100%？

问题：

本质上，我如何防止 html, body, form { margin: 0px; 填充：0px；高度：100%；} 从出现在 about.html 上？我可以使用什么值，以便在 about.html 上基本上不存在边距、填充和高度

4

4 回答 4

3

这里有几件事在起作用。一，CSS 是级联的——这意味着如果一个样式存在于另一个具有相同选择器的样式之后，则后者将优先。如果您在 DOM 中的 main.css 之后加载样式表，任何具有相同选择器的样式（与 main.css 中的完全相同）都将相互覆盖：

<link href="blah/main.css" ... />
<link href="blah/overwrite.css" ... />

其次，存在特异性问题。假设您有相同的目标元素，如下所示：

.main .last .element { //css }
.main .element { //css }

尽管第二组样式在第一组之后，但第一组将优先，因为它更具体地针对元素。

该!important修饰符实际上仅适用于全局更改，这就是人们告诉您谨慎使用它的原因 - 因为如果 EVERYTHING is !important，则什么都不是。

在您的具体情况下：

尝试在 about us 页面 html 元素上添加一个类，如下所示：

<html class="about-us">

然后在 main.css 文件中定位 about us 页面，如下所示：

html.about-us,
body.about-us,
form.about-us { margin: auto; padding: auto; height: auto; }

这利用了选择器的特殊性并覆盖了样式。

于 2013-08-19T19:51:50.563 回答
2

如果您在加载通用 CSS 样式表后编写任何规则，它将覆盖通用样式。

例如

<link rel="stylesheet" href="common.css"/>
<link rel="stylesheet" href="about.css"/><!-- these "override" the ones in common -->
<style>
    html, body, form {
       padding:12px;
       background:blue;
       border:3px;
       /*Set whatever properties you want*/
    }
</style>

注意我已经显示了内联和链接的属性......

注意 2. 仅仅因为你能做到这一点，就不要厌倦不断地重置属性……你想尽可能地减少这种情况。

于 2013-08-19T19:43:01.270 回答
0

在 HTML 标签上添加一个类并尝试这个 CSS：

html.class,html.class body,html.class form {
    /*Set whatever properties you want*/
}
于 2013-08-19T19:50:32.717 回答
0

您无法摆脱样式，但只要您的“about.css”样式表在主样式表之后加载，您就可以覆盖它。

虽然您无法摆脱定义后的样式，但有时您可以将值重置为其默认值。例如，“margin:auto;” 将导致边距恢复到通常用于 html、正文和表单的任何内容。

于 2013-08-19T19:52:05.717 回答