:is()不能批量处理标题排版样式，仅合并选择器语法，所有声明无差别应用到h1–h6；它不支持层级泛化、动态缩放或继承优化，仅适用于font-family、margin:0等所有标题共有的基础样式。
:is() 不能批量处理标题排版样式——它不提供层级泛化、动态缩放或继承优化，只做选择器语法合并。你写 :is(h1, h2, h3, h4, h5, h6)，浏览器仍会逐个解析这六个标签，所有声明（比如 font-size）都会无差别应用到每个标签上。
为什么:is(h1, h2, h3, h4, h5, h6)不能替代逐层定义
常见错误是把 :is() 当成“统一管理入口”，结果发现：font-size: 2rem 强行套在 h6 上，视觉失衡；margin-top: 1.5em 套在 h1 上又显得太松。因为：
-
:is()不支持通配符（如h[1-6]）或范围语法，必须显式枚举 - 括号内任一选择器无效（比如文档里根本没有
h5），整条规则在部分浏览器中静默失效 - 所有样式声明对括号内每个元素都生效，无法按层级差异化控制
- 权重取括号内最高项（如混入
#main h1），可能意外覆盖其他规则
真正该用:is()的标题场景：公共基础样式
只适用于那些**所有标题都该一致、且不依赖层级语义**的属性，例如重置默认行为或启用现代排版特性：
- 统一字体族：
:is(h1, h2, h3, h4, h5, h6) { font-family: system-ui, sans-serif; } - 禁用默认外边距：
:is(h1, h2, h3, h4, h5, h6) { margin: 0; } - 启用文本换行：
:is(h1, h2, h3, h4, h5, h6) { text-wrap: balance; } - 设置行高基线：
:is(h1, h2, h3, h4, h5, h6) { line-height: 1.25; }
这些属性本身就不该随层级变化，:is() 在这里才省事、安全、无副作用。
立即学习“前端免费学习笔记（深入）”；
如何避免:is()导致标题样式失控
一旦你试图在 :is() 块里塞进任何层级相关样式（如 font-size、margin-bottom、font-weight），就大概率翻车。正确做法是分两步：
- 先抽离公共基础样式（用
:is()或直接逗号列表均可） - 再单独定义各层级差异：
h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }、h2 { font-size: clamp(1.375rem, 3.5vw, 2.125rem); }等 - 若用 CSS 自定义属性控制缩放比例，定义
--h-scale-1: 2.5;等变量，再在对应标签里引用，而非塞进:is() - 别在
:is()里混用不同权重的选择器，例如:is(h1, .page-title, #hero h1)—— 整条规则权重会被拉高到 ID 级，破坏原有样式流
最常被忽略的是响应式断点与可访问性：用 :is() 统一了 font-family，但没配 clamp() 或媒体查询控制小屏下的 font-size，结果移动端标题挤成一团；或者用 display: flex 包裹标题后，没验证 screen reader 是否仍能正确识别层级顺序。
