Question

我在处理大型项目时遇到了这个问题，觉得我应该在这里寻求社区的意见。

我已经指定了一个css类＆＃39;标题＆＃39;在style1.css中，即

.header { color: red;}

在另一个档案中，我无意中将一个班级命名为“＃”标题＆＃39;再次遵循这条规则：

.header { background-color: yellow; }

当我刷新浏览器时，我注意到红色字体，并在检查样式检查器后发现了问题。我试图通过应用特异性来避免这个问题，即＃some-div .header，但这并没有阻止它应用红色字体。当然，我可以通过将标题重命名为其他内容来解决问题，但我很好奇处理大型项目的开发人员如何处理这个问题。谢谢你的时间。

Answer 1

好吧，从您的代码中，您在头类的两个声明中指定了不同属性的值。第一个声明指定颜色属性，第二个声明指定背景颜色属性。从所有迹象来看，你并没有真正地超越＆＃34;因为你没有为一个属性提供冲突的值所以，CSS只是将头类的第一个声明的值赋予第二个，因为没有区别。如果你想在第二个时候覆盖它，你可能必须在头类的第二个声明中添加一个不同的标识符来指向一个唯一的元素，并为color属性指定一个不同的值。希望这能满足你的好奇心。

Answer 2

不要像其他用户建议的那样使用!important。避免一切费用。这是目前最简单的方法，但是一旦你开始沿着这条路走下去，你最终会得到一个很难管理的样式表。

为特定基础设置样式，并使用类和更具体的选择器作为覆盖。请记住样式表级联。

例如，假设您的标题字体颜色应该是.header。如果你有其他一次性或独特的标题共享相同的结构提供另一个类对你有意义。

举个例子：

两个标题都有.header个样式，但带有特殊类的标题有蓝色文字颜色，它会覆盖红色。

＆＃13;

.header {
  color: red;
  width: 100%;
  display: block;
  background-color: #eee;
  padding: 10px;
  margin: 2px;
}
.header.special {
  color: blue;
}

＆＃13;

<div class="header">Regular Header</div>
<div class="special header">Special Header</div>

＆＃13;

Answer 3

只需在其中一个案例中添加其他类。例如：

.header {
  color: red;
}

.header.yellow-bg {
  color: initial;
  background-color: yellow;
}

<h3 class="header">Red header</h3>
<h3 class="header yellow-bg">Black/yellow header</h3>

color的第二个声明适用，因为它更具体（2个类＆gt; 1个类）。

如何避免css选择器从另一个文件应用样式规则

3 个答案: