为什么父母的重要性会丢失？

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

每the MDN documentation：

  

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

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

此处忽略!important的原因是，!important优先于所有其他声明，前提是选择相同类型的元素。这并不重要，因为孩子是span，它是一个不同的元素，而不是另一个div。如果孩子为div，则!important，然后!important将适用：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

@Alohci引用了in the comments文档的链接：

W3C CSS 2.1规范。 6.1.1 Specified values

  

用户代理必须首先为每个属性分配指定的值   在以下机制上（按优先顺序排列）：

     

  
1. 如果cascade产生值，请使用它。
  
2. 否则，如果属性为inherited并且   元素不是文档树的根，使用计算   父元素的值。
  
3. 否则使用属性的初始值。每个属性的初始值都在属性的定义中指出。
  

所以现在我了解情况如下：

父属性不会直接影响子级，但浏览器会使用它们：

1. 当孩子需要它时（inherit）;
2. 当未在任何地方指定所需属性时（既不是由孩子，也不是由用户，也不是由浏览器本身指定）并且被定义为继承。

因此，父母的特异性和重要性不与儿童的特异性相竞争。在父母的级别上有一个胜利者，在孩子的级别上有一个胜利者，但是他们彼此不了解。只有当浏览器使用子元素的父元素时，才能在父级别赢得胜利。

简而言之，父元素不会影响，但会指定一个示例。孩子不服从，但在他认为合适时会模仿。