CSS !important 不会覆盖来自外部样式表的样式

Question

在样式表中，我有这个：

body {
  color: white !important;
}

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

https://www.graf.ly/graph_templates/56/

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

我认为 !important 会忽略 CSS 的特殊性，并充当始终使用该样式的指令。我以前从未见过这种行为。

注意：

不要被图表轴上的白色文本所迷惑，这是一个text svg 元素，并用fill: white !important 着色。

另外，我很清楚 !important 的正确用法。所以请不要使用 cmets 或回答说“你永远不应该使用！important”。这不是问题:)

Answer 1

这与 CSS 特定性或 !important 无关。您在 main.css 中有一条规则说：

#legend .label {
  color: black;
}

选择器直接以.label 元素为目标，并为它们赋予颜色，从而防止它们从主体或其他祖先那里继承颜色。 !important 属性仅适用于目标元素；它不会强制其他元素继承该属性。换言之，指定的规则始终优先于继承的规则，即使继承的规则是!important。

查看规范：

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

1. 如果级联产生一个值，请使用它。
2. 否则，如果该属性被继承并且该元素不是文档树的根，则使用父元素的计算值。
3. 否则使用属性的初始值。每个属性的初始值都在属性的定义中指明。

——http://www.w3.org/TR/CSS21/cascade.html#specified-value

Answer 2

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

#legend .label {
    color: black;
}

将其更改为 white 即可。

关于重要性，它将优先于对body 的其他引用，但不会优先于#legend 标签，这是一个更具体和适用的选择器。这是一篇关于 CSS 特异性的不错的文章：http://css-tricks.com/specifics-on-css-specificity/