CSS！重要信息：不覆盖外部样式表中的样式

在样式表中，我有以下内容：

body {
  color: white !important;
}

请注意，它是如何在本页右侧的文本上不起作用的：

您可以检查文本，并查看样式是否已应用，但随后被覆盖。这怎么可能

我想！要点忽略CSS的特殊性，并作为始终使用该样式的指令。我以前从未见过这种行为

注意：

不要被图形轴上的白色文本所愚弄，这是一个

text

svg元素，用

fill:white着色！重要信息

---

此外，我很清楚正确使用！重要的。因此，请不要评论或回答“你不应该使用！重要”。这不是问题：）

您在main.css的第94行有一个更具体的规则：

#legend .label {
    color: black;
}

将其更改为

白色

，您就可以开始了

---

关于重要性，它将优先于对

正文

的其他引用，但不优先于更具体、更适用的“图例标签”。这里有一篇关于CSS的特殊性的文章：

这与CSS的特殊性或

无关！重要信息

。main.css中有一条规则，上面写着：

#legend .label {
  color: black;
}

选择器直接将

.label

元素作为目标，并为它们指定颜色，这会阻止它们从主体或其他祖先继承颜色。一个

！重要信息

属性仅适用于目标元素；它不会强制其他元素继承该属性。换句话说，指定的规则始终优先于继承的规则，即使该继承的规则是

！重要信息

请参见规范：

用户代理必须首先根据以下机制（按优先顺序）为每个属性分配指定的值：

如果级联产生一个值，请使用它

否则，如果属性被继承，并且元素不是文档树的根，则使用父元素的计算值

否则，请使用属性的初始值。每个属性的初始值在属性的定义中指示

-

---

我以为CSS的特殊性不能覆盖！重要指示。这不是真的吗？有很多层次的特殊性，而且都受到CSS级联方式的影响-因为您引用的是#图例。直接标记它不是从身体继承的，因此！重要的东西没有方向感，这是不准确的。虽然#legend.label确实比body更具体，但这并不重要，因为它们都针对不同的元素；然而，@DonnyP正确地认为，如果在#legend.label上没有设置颜色，那么在body上设置颜色会使文本变白。特定规则将使该文本对主体颜色的继承无效。我几乎不认为这是不相干的。我同意@ MIFI79，并想补充的是，你知道的是真实的，但它只会在同一个选择器上使用一个重要的。例如，如果它是#legend.label{color:black}和#legend.label{color:white！important；}，那么它将是有效的。在本例中，该属性不是直接应用于选择器，而是从其超级父级（即主体）继承的。这正是我刚才所说的-首先，应用主体颜色，然后应用任何父元素颜色，最后，它被特定规则覆盖。我们只是在争论语义学，我不知道。我没有投反对票，但显然有人不喜欢。好吧。如果这只是一个语义学的问题，我可以接受——至少我们的答案是一致的。如果这让你感觉更好，有人也会投票否决我的答案你的回答解释了为什么

！重要提示

不起作用，但如果不使规则更具体，它就无法提供使其起作用的解决方案。我不想创建一个更具体的规则，因为我正在谷歌的主页（在我自己的浏览器上）上应用CSS，过度调整的规则经常会被打破。我只是想要一个规则来强制覆盖所有内容，不管是否更具体。mifi79很好地回答了这个问题，但对于纠正这种行为的实用规则，我建议使用

#legend，#legend.label{color:inherit；}

。不是真正的答案，因为答案是它不继承body color属性。这就解决了您的本地化问题。