html - HTML 继承如何处理 CSS 中冲突的样式规则？

Question

我只是在阅读 HTML 继承和在 CSS 中实现字体大小属性时感到困惑。

正如我正在阅读的书中提到的那样，级联机制控制着当冲突规则应用于相同元素时如何应用样式。因此，当您在正文和 <p> 中调整 font-size 属性时同时在体内元素，<p>元素字体大小应该覆盖。

但是，当我使用下面的代码时，这并没有发生:

body {
  font-size: 62.5%;
}

<p style="font-size:  1em">In em</p>
<p style="font-size: 16px">In px</p>
<p style="font-size: 12pt">In pt</p>
<p style="font-size: 100%">In percentage</p>

为什么？有什么解释吗？

Answer 1

这是预期的行为。以 px 或 pt 设置的字体大小不会从父元素继承。 16px就是16px，不管怎样。以 em 或百分比设置的字体大小是相对于父元素的，因此 100% 或 1em 与父元素的字体大小相同。