Question

我的父网页正在使用custom1.css，而子网页正在使用custom2.css。我的问题是子页面css属性被父页面css覆盖。如何阻止作用于子页面elemenets的父页面css。

Answer 1

如何阻止作用于子页面elemenets的父页面css？

从子页面的custom1.css中删除<head>引用。

如果由于某种原因，你不能这样做，那么你需要阅读有关css特异性的内容，以便了解＆＃34; parent css＆＃34;在＆＃34; child css＆＃34;中覆盖规则。

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 2

使用级别应用Css。

所以只需在所有内容周围添加一个容器就可以防止它

你可以这样做： .class1 #content {make it blue here}

.class2 #content {make it red here}

无法按文件执行此操作。你应该确保永远不会发生，这会产生意想不到的结果

Answer 3

你可以在你的css样式之后添加!important;（这是一个不好的例子），或者你可以做一些更具体的选择器。

body div#main{
  /* Style */
}

以上是更具体的，将会赢得＆＃34;以下内容：

div#main{
  /* Style */
}

Answer 4

在您的子页面上，如果您同时使用两个CSS文件，请检查您的CSS顺序是否正确

<html> 
<head>
    <title>Page title</title>        
    <link rel="stylesheet" href="custom1.css">
    <link rel="stylesheet" href="custom2.css">
</head>

以便级联将按照您的期望以正确的方式工作

还有其他需要检查的内容，如CSS特性，继承和级联。您可以查看http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/此

希望它有所帮助！

Answer 5

CSS样式将按其所在的顺序应用。请检查此示例，第二个样式覆盖，div的最终宽度为40px。

div{
 width:300px;
}

div{
 width:40px;
}

链接样式表也一样。

<link rel="stylesheet" type="text/css" href="style_1.css">
<link rel="stylesheet" type="text/css" href="style_2.css">

此处style_2.css会覆盖style_1.css中的相同样式，因为它会再次链接。

所以您需要做的是，您需要最后应用链接的样式表。

如何使用另一个css文件覆盖一个css文件

5 个答案: