为何用通配符*设置font-size:0.5rem时body字体大小被双重缩放？

为什么body字体大小是4px？ #

通配符选择器*会匹配页面中所有元素，包括html（根元素）和body：

1. 根元素html的font-size: 0.5rem基于浏览器默认的1rem=16px计算，得到8px；
2. body同样被*选中，它的0.5rem是基于**已经修改后的根元素字体大小（8px）**计算，即8px × 0.5 = 4px，因此出现双重缩放的结果。

最佳实践建议 #

1. 避免直接用*设置全局字体 #

通配符会覆盖所有元素（包括表单按钮、输入框等）的默认字体样式，容易引发意外的样式冲突。

2. 根元素+继承的方案 #

先给根元素设置基础字体大小，再让其他元素继承该值，确保全局统一且无双重缩放：

/* 设置根元素基础字体 */
html { font-size: 0.5rem; }
/* 让所有子元素继承根元素字体，针对可能不继承的元素可单独指定 */
body, p, h1, h2, h3, h4, h5, h6, ul, ol, form, input, button {
  font-size: inherit;
}

3. html *组合选择器方案 #

这个方案直接匹配html下的所有子元素，不会影响根元素本身，能避免双重缩放：

/* 根元素保持默认或自定义基础值 */
html { font-size: 16px; }
/* 所有子元素统一设置字体大小 */
html * { font-size: 0.5rem; } /* 计算为16px × 0.5 = 8px */

4. CSS变量管理方案（推荐） #

用CSS变量统一管理全局字体，后期调整更方便：

:root {
  --base-font-size: 0.5rem;
}
html {
  font-size: var(--base-font-size);
}
/* 所有非根元素继承基础字体 */
*:not(html) {
  font-size: inherit;
}

测试代码片段 #

JavaScript #

console.log("doc:  " + getComputedStyle(document.documentElement).fontSize);
console.log("body: " + getComputedStyle(document.body).fontSize);

CSS（引发问题的代码） #

* { font-size: 0.5rem; }

内容的提问来源于stack exchange，提问作者Sideways S