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

【问题标题】：How HTML Inheritance works with conflicting styles rules in CSS?HTML 继承如何处理 CSS 中冲突的样式规则？
【发布时间】：2016-10-24 15:21:24
【问题描述】：

我只是在阅读 HTML 继承和在 CSS 中实现 font-size 属性时感到困惑。

正如我正在阅读的书中所提到的，当冲突规则应用于相同元素时，级联机制控制了样式的应用方式。因此，当您同时调整 body 和 <p> 元素中的 font-size 属性时，<p> 元素的 font-size 应该被覆盖。

但是，当我使用以下代码时，这并没有发生：

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>

为什么？有什么解释吗？

【问题讨论】：

确实发生了。是什么让你认为它没有发生？

标签： html css

【解决方案1】：

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

【讨论】：