Html !由一类子元素重写的重要

我有一个非常糟糕的CSS规则（高特定性，使用！important），它设置段落中文本的颜色：

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

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

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

为什么这个简单的类具有很低的特定性，并且没有！重要标志是否覆盖父规则

---

codepen.io上的完整代码段如下：

如果您不希望.black类重写父规则，您只需从.black类中删除color属性，span中提到的类无论父规则如何，都将始终具有高度的特异性

这只是因为没有比您在

.black

中声明的更具体的规则了。即使它是

的子元素，也有一个

重要标记规则，它仅在找不到更具体的其他颜色定义时从中继承颜色。从父上下文继承是最不具体的“规则”。还有，
！重要信息
请注意，规则的一部分不是继承的

如果不是这样，您通常会被迫使用
！重要信息
每当元素采用已从父元素继承的样式时，或者您必须经常使用非常长的选择器以确保子元素选择器的特定性不低于其继承的定义时

此外，请比较Mozilla对此主题的看法：

直接目标元素的样式将始终优先
过度继承样式，而不管继承样式的特殊性
规则


因为
！重要信息
仅适用于当前元素样式，不适用于具有指定相同属性的子元素

为什么这个简单的类具有很低的特定性，并且没有！重要的
标志覆盖父规则

因为这是两条不同的规则。
您有一个文本类，它被严格地调用，但只是一个没有选择器的类

在用不同的类添加一个span之后，它不会被覆盖，因为这是另一条规则。它将应用于跨度。和.text应用于段落。
高特异性规则仅适用于父类。当涉及到它的子类时，父类的高度专一性逐渐成熟为子类继承的父类样式

而且，当涉及到设计子对象的样式时，所有专门针对它的CSS规则都优先于父对象的高特异性规则

如果您在浏览器的开发人员控制台中对此子span标记执行“Inspect Element”（检查元素），您将看到如何优先考虑针对该特定元素的CSS规则，该元素覆盖了列表下方显示的所有父样式。
您没有添加代码段我的道歉，我编辑了问题“从父内容继承是可能的最不具体的规则”-不知道这一点，但非常有意义，感谢您的快速解释：）“还有！afaik，规则的重要部分不是继承的。“正确，它不是继承的。如果有多个规则针对同一父级，它唯一能做的就是影响子级继承的值。