为什么父母的 !important 会输？

Question

color父块的属性有一个!important声明。为什么孩子的财产优先？怎么解释？

我看到了特殊性的解释，但我不明白如何将它们应用于这个特殊情况。

也许我错过了文档中的一些基本位置......

div {
  color: purple !important;
  font-family: 'Open Sans', serif;
  font-size: 30px;
  font-weight: bold;
}
span {
  color: red; /* Why does parent's `!important` lose? */
}

<div>
  Parent
  <span>Child</span>
</div>

Answer 1

根据MDN 文档：

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

在您的示例中，span选择器直接针对子元素，因此优先于父div选择器的继承样式。现在解释为什么!important不改变这一点。

!important此处忽略的原因是，仅当它是相同类型的元素被选择时，它才!important优先于所有其他声明。这里无关紧要，因为 child 是 a ，它是一个不同的元素，而不是 another 。如果孩子是 a ，那么， then将适用：spandivdiv!important!important

div {
  color: purple !important;
  font-family: 'Open Sans', serif;
  font-size: 30px;
  font-weight: bold;
}
div > div {
  color: red; 
}

<div>
  Parent
  <div>Child</div>
</div>

在上面的例子中，div > div理论上，由于特殊性，规则应该使子元素变为红色，但由于!important位于div选择器之下，因此选择相同的元素类型，它将覆盖更具体的规则。