!important 被子元素的 class 覆盖
!important overriden by a class of child element
我有一个非常糟糕的 CSS 规则（高特异性，使用 !important）设置段落中文本的颜色：
#wrapper .article .text {
color: green !important;
}
然后我在该段落中放置了一个简单的跨度元素，并通过简单 class:
设置跨度文本的颜色
.black {
font-weight: bold;
color: black;
}
为什么这个简单的 class 具有低特异性且没有 !important 标志覆盖父规则？
此处 codepen.io 上的完整代码段：http://codepen.io/Jarino/pen/oXYeQZ?editors=110
如果您不希望 .black class 覆盖父规则，您只需从 [=12] 中删除颜色 属性 =].black class，无论父规则如何，span 中提到的 class 始终具有高特异性。
这仅仅是因为没有比您在 .black 中声明的更具体的规则 <span>。即使它是具有 important! 标记规则的 <p> 的子元素，它也只会在找不到更具体的其他颜色定义时从中继承颜色。从父上下文继承是最不具体的 "rule" 可能。此外，规则的 !important 部分不会被继承，afaik。
如果不是这种情况，您通常会被迫使用 !important 每当一个元素采用它已经从父级继承的样式时，或者您将不得不不断地使用很长的选择器确保您的子元素选择器的特异性不低于其继承的定义。
此外，比较一下 Mozilla 在这个问题上的说法：
Styles for a directly targeted element will always take precedence
over inherited styles, regardless of the specificity of the inherited
rule.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#directly-targeted-elements
因为 !important 仅适用于当前元素样式而不适用于指定相同 属性 的子元素。
How come, that this simple class with low specifity and no !important
flag overrides the parent rule?
嗯，因为它们是两个不同的规则。
您的文本 class 非常严格地被调用，但只有 class 没有选择器。
添加具有不同 class 的跨度后，它不会被覆盖，因为这是另一条规则。它被应用于跨度。 .text 应用于该段落。
高特异性规则仅适用于父 class。当涉及到它的子项时，父项的高度特异性 class 会缓和为子项继承的父项样式。
而且，在为子项设置样式时，所有专门针对它的 CSS 规则都优先于父项的高特异性规则。
如果您在浏览器的 Developer Console 中为此子 span 标记执行 'Inspect Element'，您将看到如何优先考虑针对覆盖所有父元素的特定元素的 CSS 规则出现在列表下方的样式。
我有一个非常糟糕的 CSS 规则（高特异性，使用 !important）设置段落中文本的颜色：
#wrapper .article .text {
color: green !important;
}
然后我在该段落中放置了一个简单的跨度元素，并通过简单 class:
设置跨度文本的颜色.black {
font-weight: bold;
color: black;
}
为什么这个简单的 class 具有低特异性且没有 !important 标志覆盖父规则？
此处 codepen.io 上的完整代码段：http://codepen.io/Jarino/pen/oXYeQZ?editors=110
如果您不希望 .black class 覆盖父规则，您只需从 [=12] 中删除颜色 属性 =].black class，无论父规则如何，span 中提到的 class 始终具有高特异性。
这仅仅是因为没有比您在 .black 中声明的更具体的规则 <span>。即使它是具有 important! 标记规则的 <p> 的子元素，它也只会在找不到更具体的其他颜色定义时从中继承颜色。从父上下文继承是最不具体的 "rule" 可能。此外，规则的 !important 部分不会被继承，afaik。
如果不是这种情况，您通常会被迫使用 !important 每当一个元素采用它已经从父级继承的样式时，或者您将不得不不断地使用很长的选择器确保您的子元素选择器的特异性不低于其继承的定义。
此外，比较一下 Mozilla 在这个问题上的说法：
Styles for a directly targeted element will always take precedence over inherited styles, regardless of the specificity of the inherited rule.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#directly-targeted-elements
因为 !important 仅适用于当前元素样式而不适用于指定相同 属性 的子元素。
How come, that this simple class with low specifity and no !important flag overrides the parent rule?
嗯，因为它们是两个不同的规则。 您的文本 class 非常严格地被调用，但只有 class 没有选择器。
添加具有不同 class 的跨度后，它不会被覆盖，因为这是另一条规则。它被应用于跨度。 .text 应用于该段落。
高特异性规则仅适用于父 class。当涉及到它的子项时，父项的高度特异性 class 会缓和为子项继承的父项样式。
而且，在为子项设置样式时，所有专门针对它的 CSS 规则都优先于父项的高特异性规则。
如果您在浏览器的 Developer Console 中为此子 span 标记执行 'Inspect Element'，您将看到如何优先考虑针对覆盖所有父元素的特定元素的 CSS 规则出现在列表下方的样式。