CSS！important不会覆盖外部样式表的样式 [英] CSS !important does not override styles from external stylesheets

问题描述

在样式表中，我有：

body {
  color: white !important;
}

注意它在这个文件右边的文本第：

Notice how it doesn't work on the text on the right side of this page:

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

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

You can inspect the text, and see that the style was applied, but then overridden. How is this possible?

我认为！important忽略CSS特性，并作为一个指令，总是使用该样式。我从来没有见过这种行为。

I thought !important ignores CSS specificity, and acts as a directive to always use that style. I've never seen this behavior before.

注意：

t被图形的轴的白色文本所愚弄，这是一个 text svg元素，并用 fill：white！important 。

Don't be fooled by the white text by the graph's axis, that is a text svg element and was colored with fill: white !important.

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

Also, I'm well aware of the correct usage of !important. So please no comments or answers saying "you should never use !important". That is not the question :)

推荐答案

这与CSS特性或 / code>。您在main.css中有一个规则：

This has nothing to do with CSS specificity or !important. You have a rule in main.css that says:

#legend .label {
  color: black;
}

选择器定位 .label 元素，并给它们一种颜色，这防止他们继承来自身体或其他祖先的颜色。 ！important 属性仅适用于定位的元素;它不强制其他元素继承该属性。换句话说，即使继承的规则！important ，指定的规则始终优先于继承的规则。

The selector is targeting the .label elements directly and giving them a color, which prevents them from inheriting the color from the body or some other ancestor. An !important property applies only to the element that is targeted; it does not force other elements to inherit that property. In other words, a specified rule always takes precedence over an inherited rule, even if that inherited rule is !important.

查看规范：

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

User agents must first assign a specified value to each property based on the following mechanisms (in order of precedence):

1. 如果级联产生值，请使用


2. 否则，是继承的，并且元素不是文档树的根，请使用父元素的计算值。


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

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

这篇关于CSS！important不会覆盖外部样式表的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！