logo标签列表

如何覆盖外部CSS？

csshtmloverridingpadding
12

我有一个外部的CSS文件，它在我的内容div上应用了35px的填充。所有我的HTML页面都加载在该div内，但我想在其中一个页面中使用0 padding-right。

我尝试了内联CSS，在该页面的body上直接应用它以及使用!important，但都没有起作用。

我做错了什么？

index.html：

<div id="content"><?php include "page.html"?></div>

主要样式表(main.css):

#content{
    margin-top: 303px;
    padding: 35px;
    z-index:1;
}

页面.html:

<body style="padding:0px;">
1
问题需要更多的细节和可能的代码参考，这可能是数百万个问题之一。 - SpYk3HH
你能提供代码吗？最好是jsfiddle示例？ - Dom
1
你将 padding:0; 属性应用于 body，而不是 div。这可能是你的问题吗？还是只是打错了？ - jamesplease
4个回答
22

要覆盖CSS设置，您必须使用关键字important。

<body style="padding:0px ! important;">
5
如果上述样式有!important该怎么办？ - Raphael
不应该在CSS文件中添加那个。因此，您可以使用控制台查找CSS文件，然后删除其中的关键字。 - Nicholas Bourbaki
8
CSS按自上而下的顺序读取，因此代码中较低的任何内容都应被覆盖，参见：http://jsfiddle.net/PFx9h/ 如果某些内容没有生效，则是因为有其他代码正在覆盖它。使用像Webkit Dev Tools或Firebug这样的元素检查器来查看应用的样式及其方式。
编辑：
由于您发布了代码，因此样式不会应用于
。
3
Fluidbyte是正确的，我在错误的元素上尝试应用0填充是愚蠢的。需添加: 

<style>
#content{
    padding-right:0px;  
}
</style>

在page.html上工作得很好，它覆盖了外部CSS。

0

要么在内容div内联应用style="padding:0px;"（不建议），要么在加载外部样式表后加载您的样式。将style="padding:0px;"应用于body仅会影响body，而不会应用于其中的每个元素。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接