Question

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

在main.css上我有这个css块：

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

这会在about.html上产生问题。在about.css中，我能做什么使得该页面上的html，body，form不使用margin：0px ;, padding：0px;和height：100％？

问题：

基本上，我如何防止html，body，form { 保证金：0px; 填充：0px; 身高：100％; } 从about.html出现？我可以使用什么值，以便在about.html

上基本上不存在边距，填充和高度

Answer 1

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

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

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

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

即使第二组样式位于第一组之后，第一组样式也会优先，因为它更具体地定位元素。

!important修饰符实际上仅用于全局更改，这就是为什么人们会谨慎使用它的原因 - 因为如果一切都是!important，那么什么都没有。

在您的具体案例中：

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

<html class="about-us">

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

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

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

Answer 2

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

e.g。

<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.仅仅因为你可以这样做，厌倦了不断重置属性......你想尽可能地减少这个。

Answer 3

在HTML标记上添加一个类并尝试使用此CSS：

html.class,html.class body,html.class form {
    /*Set whatever properties you want*/
}

Answer 4

你无法摆脱一种风格，但只要你的“about.css”样式表加载到主样式表之后你就可以覆盖它。

虽然一旦定义了你无法摆脱一种风格，你有时可以将一个值重置为默认值。例如，“margin：auto;”将导致保证金恢复到通常用于HTML，正文和表格的任何内容。

如果有两个CSS文件，如何覆盖某些条件？

4 个答案: