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

EN

从您的代码中，您在header类的两个声明中指定了不同属性的值。第一个声明指定颜色属性，第二个声明指定背景色属性.从所有迹象来看，您并没有真正“覆盖”任何东西，因为您没有为一个属性提供冲突的值，所以CSS只是将头类的第一个声明的值给第二个属性，因为没有区别。如果您想要在第二次重写它，您可能必须向标题类的第二个声明中添加不同的标识符，以指向唯一的元素并为颜色属性指定不同的值。希望这能满足你的好奇心。

不要像其他用户建议的那样使用!important。避免一切代价。暂时来说，这是一条简单的出路，但一旦你开始沿着这条路走下去，你就会得到一个很难管理的样式表。

为特定的基类设置样式，并使用类和更特定的选择器作为重写。记住样式表是层叠的。

例如，假设您有一个典型的标题字体颜色，应该是您的.header。如果您有其他一次性或唯一的报头，它们共享相同的结构，则为那些对您有意义的类提供另一个类。

，所以作为一个例子：

两个标头都有.header样式，但是带有特殊类的头具有蓝色文本颜色，覆盖红色。

​

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

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

​

只需在其中一个案例中添加一个不同的类即可。例如：

​

.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个类>1个类)。