!由一类子元素重写

Question

我有一个非常糟糕的CSS规则(高特殊性,使用!important),它设置段落中文本的颜色:

 #wrapper .article .text {
  color: green !important;
}

然后我在该段落中放入一个简单的span元素,并通过简单的类设置span文本的颜色:

.black {
  font-weight: bold;
  color: black;
}

为什么这个具有低特异性且没有!important标志的简单类会覆盖父规则？

codepen.io上的完整代码片段:http://codepen.io/Jarino/pen/oXYeQZ？editors = 110

Answer 1

这只是因为没有<span>比你声明的更具体的规则了.black.尽管它是<p>具有important!标记规则的子元素,但它只能从中继承颜色,如果它找不到更具体的其他颜色定义.从父上下文继承是可能的最不具体的"规则".此外,!important规则的一部分不是继承,afaik.

如果不是这种情况,那么!important每当元素采用它已经从父级继承的样式时,你就会被迫使用,或者你必须经常使用很长的选择器来确保你的子元素选择器没有比它继承的定义更低的特异性.

另外,比较一下Mozilla在这个问题上的说法:

无论继承规则的特殊性如何,直接目标元素的样式始终优先于继承样式.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#directly-targeted-elements