只有 font-family、margin、text-wrap、line-height 等不承载层级语义的基础排版属性可用 :is() 安全统一；font-size、margin-bottom 等体现语义层级的属性必须逐级定义，否则破坏可访问性与文档结构。
:is() 不能批量给 h1–h6 设置“视觉上合理”的统一样式——它会无差别应用所有声明，font-size: 2rem 也会落到 h6 上，导致语义错乱、可访问性受损。真正安全的批量设置，只适用于那些**本就不该随层级变化**的属性。
哪些标题样式能用 :is() 安全统一？
只有基础排版属性才适合塞进 :is(h1, h2, h3, h4, h5, h6)，因为它们本身不承担层级语义：
-
font-family：所有标题共用系统字体栈，没问题 -
margin: 0或margin-block: 0：重置默认外边距，合理 -
text-wrap: balance：改善长标题换行，各层级都受益 -
line-height：基线一致有助于垂直节奏，但需确认是否真要完全相同（有时h1需略高）
为什么 font-size、margin-bottom 这类不能放进去？
这类属性本质是层级语义的视觉表达。一旦写成：
:is(h1, h2, h3, h4, h5, h6) {
font-size: clamp(1.25rem, 4vw, 2.5rem);
margin-bottom: 1em;
}
就会立刻出问题：
-
h6被强行拉到和h1接近的字号，破坏文档结构感知 - 屏幕阅读器仍按
h6解读，但视觉尺寸像h2，认知割裂 - 移动端小屏下
clamp()对h6过度放大，挤占布局空间 - 后续单独写
h2 { font-size: 1.75rem; }会被同权重的:is()规则覆盖（因解析顺序靠后）
怎么写才既省事又不出错？
分两层处理，明确分离「公共基础」和「层级差异」：
- 先用
:is()抽离真正通用的部分：:is(h1, h2, h3, h4, h5, h6) { font-family: system-ui, sans-serif; margin: 0; } - 再逐级定义差异，用
clamp()或自定义属性控制缩放：h1 { font-size: clamp(1.875rem, 5vw, 3rem); }h2 { font-size: clamp(1.5rem, 4.5vw, 2.5rem); } - 如果想集中管理比例，定义 CSS 变量：
:root { --h-scale-1: 3; --h-scale-2: 2.5; }
然后在对应标签里引用：h1 { font-size: clamp(1.5rem, 4vw, calc(var(--h-scale-1) * 1rem)); }
最容易被忽略的兼容性和调试陷阱
旧版 Safari（≤15.3）遇到 :is() 会静默丢弃整条规则，且不报错。更危险的是括号内任一选择器无效（比如页面根本没有 h5，或误写成 h66），整条规则就彻底失效——你不会收到任何提示。所以：
- 关键样式必须手动回退：
h1, h2, h3, h4, h5, h6 { font-family: system-ui, sans-serif; }:is(h1, h2, h3, h4, h5, h6) { font-family: system-ui, sans-serif; } - 别在
:is()里混用不同权重的选择器，例如:is(h1, .page-title, #hero h1)—— 整条规则权重会被拉到 ID 级，破坏原有样式流 - 检查是否漏了响应式适配：统一了
font-family，但没配clamp()或媒体查询控制小屏下的font-size，移动端标题可能糊成一团
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
