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

Question

为什么计算的font-size 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父级继承...但它不是:

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

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

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

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

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

p并且#test都直接适用于第二段; 所以,有机会!important覆盖一些东西.