:is() 不能批量设置标题样式，仅是简化书写的选择器语法糖，仍需显式枚举h1–h6并单独定义差异属性，无法实现动态泛化或继承优化。
is() 伪类不支持批量匹配 h1–h6 标签
直接说结论：:is() 本身不能“批量设置”标题层级样式——它只是语法糖，用于简化选择器书写，但浏览器仍会逐个解析其中的每个标签。你写 :is(h1, h2, h3, h4, h5, h6)，效果等价于手动列出全部六个选择器，不是真的一次性注入或动态泛化。
常见错误是以为加了 :is() 就能“统一管理”，结果发现 margin、font-size 还得一个个调，甚至误以为它能触发级联继承优化，其实没有。
-
:is()内部不支持通配符（比如h[1-6]）或范围语法，必须显式枚举 - 若某条声明只对
h1有效（如font-size: 2.5rem），放在:is()块里会强行应用到h6，反而破坏语义层级 - CSS 优先级规则照常生效：
:is(h1, h2)的权重和单个h1相同，不会因“批量”而提升
真正实用的公共样式提取方式
想让 h1–h6 共享某些基础样式（比如重置 margin、统一 font-family、启用 text-wrap），应该用叠加式写法，把公共属性抽到独立规则中，再用具体标签覆盖差异部分。
- 先写通用基础样式：
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: system-ui, sans-serif; } - 再单独定义各层级差异：
h1 { font-size: 2.25rem; line-height: 1.2; }、h2 { font-size: 1.875rem; }等 - 如果项目用 CSS 自定义属性，可配合
:root定义缩放比例：--h-scale-1: 2.25; --h-scale-2: 1.875; ...，然后在对应标签里用font-size: clamp(1.25rem, calc(var(--h-scale-1) * 1rem), 3rem);
为什么不用 :where() 或 :has() 替代？
:where() 虽然权重为 0，适合覆盖默认样式，但它同样要求显式列出所有标签，不能减少重复；:has() 是父级条件判断，完全不适用于“选中自身是标题”的场景。
立即学习“前端免费学习笔记（深入）”；
-
:where(h1, h2, h3, h4, h5, h6)可以避免权重干扰，但写法长度和维护成本没变 -
:has(h1)匹配的是「包含 h1 的父元素」，不是 h1 本身，用错方向 - 目前没有任何 CSS 伪类支持正则式标签匹配（如
h\d），这是语言限制，不是技巧问题
容易被忽略的响应式与可访问性影响
批量设置标题样式时，最常漏掉两点：字体缩放断点适配、语义层级与 outline/keyboard 导航一致性。
- 别只在桌面端设
font-size，h1–h6 在小屏下可能挤成一团，建议用clamp()或媒体查询分段控制 - 如果用
display: flex或transform改变标题布局，要确认 screen reader 仍能正确识别层级（避免仅靠视觉大小判断） - 移除
outline或自定义 focus 样式时，确保h1:focus-visible等状态仍有足够对比度，否则键盘用户会迷失当前焦点位置
复杂点不在怎么写 :is()，而在怎么让六种标题在不同设备、不同交互方式下都保持语义清晰且视觉协调——枚举本身简单，约束条件才是真难点。
