为什么！重要的是被覆盖了？

Question

为什么计算出的字体大小22.08px（1.38em）而不是16px？

.stec {
  font-size: 16px !important;
}
#content p {
  font-size: 1.38em; /* why does this override !important? */
}

<div id="content">
  <div class="stec">
    <p>some paragraph text</p>
  </div>
</div>

16px是!important，但尚未应用。这是Chrome调试器的计算样式窗口：

  

Answer 1

继承的样式具有非常低的优先级。来自MDN：

  

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

那么，这就是你的问题; .stec和#content p不会定位相同的元素。 #content p会覆盖.stec中继承的样式。

考虑以下示例。你可能希望段落文本是红色的，继承自它的div父...但它不是：

＆＃13;

＆＃13;

div {
  color: red !important;
}
p {
  color: blue;
}

＆＃13;

<div> <!-- !important is applied here -->
  This text is red.
  <p>Were you expecting this text to be red too?</p> <!-- not here -->
</div>

＆＃13;

＆＃13;

＆＃13;

它也没有关于特异性，正如其他人错误地建议的那样。它是关于规则是否实际针对适当的元素。请考虑以下示例：

＆＃13;

＆＃13;

p {
  color: red !important;
}
#test {
  /* this is the more specific selector, yet it's overridden by !important */
  color: blue;
}

＆＃13;

<p>red</p>
<p id="test">were you expecting blue?</p>

＆＃13;

＆＃13;

＆＃13;

p和#test都直接适用于第二段;因此，!important有机会覆盖某些内容。