！由一类子元素重写

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!的子元素，但如果它找不到更具体的其他颜色定义，它只会继承它的颜色。从父上下文继承是最不具体的规则＆＃34;可能。此外，规则的!important部分不会被继承，afaik。

如果情况并非如此，那么每当元素采用已从父级继承的样式时，您通常会被迫使用!important，或者您必须经常使用非常长的选择器来制作确保您的子元素选择器的特异性不低于它继承的定义。

另外，比较一下Mozilla在这个主题上所说的内容：

  

直接定位元素的样式始终优先   过继承样式，无论继承的特殊性   规则。

     

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

Answer 2

高特异性规则仅适用于父类。当谈到它的孩子时，父母阶级的高度特异性会变成父母继承的父母风格。

而且，在为孩子设计样式时，所有专门针对它的CSS规则都优先于父母的高特异性规则。

如果您在浏览器的开发者控制台中为此子范围标记执行'检查元素'，您将看到如何优先选择针对特定元素的CSS规则，该元素将覆盖列表中显示的所有父样式

Answer 3

如果您不希望 .black 类覆盖父规则，则只需从 .black 类中删除颜色属性，即提到的类无论父规则如何，in span都将具有高特异性。

Answer 4

因为!important仅适用于当前元素样式，不适用于具有指定相同属性的子元素。

Answer 5

  

为什么这个简单的类具有低特异性且没有重要性   flag会覆盖父规则吗？

嗯，因为它们是两个不同的规则。 你有一个非常严格的文本类，但只有一个没有选择器的类。

在您为不同的类添加一个范围后，它不会被覆盖，因为它是另一个规则。它被应用于跨度。并且.text应用于段落。