不能用 :is() 统一设置标题字体大小，因为它会拉平语义层级导致视觉结构崩塌；应仅用 :is() 重置与层级无关的属性（如 margin、font-family），而 font-size 必须按 h1–h6 单独分层定义。
别用 :is() 重构标题大小层级 —— 它会把所有标题拉平，h1 和 h6 强行套同一套 font-size，视觉结构直接崩掉。
为什么 :is(h1, h2, h3, h4, h5, h6) 不能设字体大小
因为 :is() 只是语法合并，不是语义分组。你写：:is(h1, h2, h3, h4, h5, h6) { font-size: 2rem; }
浏览器会把它展开成六条独立规则，每条都生效：h1 { font-size: 2rem; }、h2 { font-size: 2rem; }……结果 h6 被撑得过大，h1 反而显得单薄。
-
:is()不识别语义层级，不支持h[1-6]或通配范围 - 括号里只要有一个选择器不存在（比如页面没
h5），整条规则在部分旧浏览器中静默失效 - 所有声明无差别应用，无法按
h1 → h6递减缩放 - 想靠
clamp()统一控制？不行 ——clamp(1.5rem, 4vw, 2.5rem)套给h6在小屏上照样挤成一团
真正该用 :is() 的标题场景：基础重置
只用于那些**和层级完全无关、所有标题必须一致**的属性：
- 禁用默认外边距：
:is(h1, h2, h3, h4, h5, h6) { margin: 0; } - 统一字体栈：
:is(h1, h2, h3, h4, h5, h6) { font-family: system-ui, sans-serif; } - 启用现代换行：
:is(h1, h2, h3, h4, h5, h6) { text-wrap: balance; } - 设置基线对齐：
:is(h1, h2, h3, h4, h5, h6) { line-height: 1.2; }
这些属性本身就不该随 h1–h6 变化，:is() 在这里才安全、省事、无副作用。
立即学习“前端免费学习笔记（深入）”；
怎么极简重构标题大小层级（不踩坑）
正确做法是两层分离：先抽公共基础，再单独定义层级差异。
- 用
:is()或逗号列表做基础重置（如上） - 单独写层级样式，推荐用
clamp()+ 自定义属性控制比例：h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); --h-scale: 2.5; }<br>h2 { font-size: clamp(1.375rem, 3.5vw, 2.125rem); --h-scale: 2.125; }<br>h3 { font-size: clamp(1.25rem, 3vw, 1.875rem); --h-scale: 1.875; } - 避免在
:is()里混用不同权重的选择器，例如:is(h1, .page-title, #hero h1)—— 整条规则权重被拉高到 ID 级，容易覆盖其他样式
最容易被忽略的兼容性与可访问性点
用 :is() 统一了 font-family，但没配响应式 font-size？移动端标题会挤成一块；用 display: flex 包裹标题后，没验证 screen reader 是否仍能正确识别 h1–h6 层级顺序？语义就断了。
真正要极简又可靠，就得接受：标题大小必须分层定义，:is() 只负责“不该变”的那部分。
