:is() 不能优雅合并标题层级样式，仅适用于同一祖先下共享非语义属性的场景；需先全局重置 h1–h6，默认样式强级联且 :is() 不提升优先级；跨父容器写法非法，兼容性差且易静默失效。
不能用 :is() “优雅地合并标题层级样式”——它压根不解决层级语义问题，只帮你少写几遍重复路径。真要控制 h1–h6，得先重置、再分层定义，:is() 顶多在局部场景省两行代码。
什么时候 :is(h1, h2, h3) 才算合理？
仅当这些标题在**同一祖先下、需共享完全相同的非语义属性**时才适用。比如禁用默认外边距、启用文本平衡、继承系统字体。
- ✅ 推荐：
.article-content :is(h1, h2, h3, h4) { margin: 0; text-wrap: balance; font-family: system-ui, sans-serif; } - ❌ 错误：
:is(h1, h2, h3) { font-size: 1.8rem; }—— 这会让 h6 和 h1 一样大，破坏可访问性与视觉层级 - ⚠️ 注意：
:is()不改变级联顺序，h1.section-title仍会覆盖:is(h1, h2) { ... }，权重按括号内最高者（如含#id）计算
为什么不能靠 :is() 做基础重置？
浏览器对 h1–h6 的默认样式（font-size、margin、font-weight）是强级联的，:is() 不提供重置优先级，也不触发渐进增强。
- ❌ 危险写法：
:is(h1, h2, h3, h4, h5, h6) { all: unset; }—— Chrome 89 以下、Safari 13.1 以下直接丢弃整条规则 - ✅ 正确做法：先全局重置
h1, h2, h3, h4, h5, h6 { all: unset; margin: 0; font-weight: normal; line-height: 1.4; }，再逐级定义差异 - ? 替代方案：
@layer reset { h1, h2, h3 { all: revert-layer; } }更可控，但 Safari ≤15.5 不支持
:is() 跨不同父容器时会失效
标题若散落在 header、.card、.sidebar 等不同结构里，:is(header h1, .card h2, .sidebar h3) 是非法语法——:is() 括号内只接受简单选择器或组合选择器，不能带完整路径。
- ❌ 无效：
:is(header h1, .card h2)—— 浏览器解析失败，整条规则作废 - ✅ 可行：
header h1, .card h2, .sidebar h3 { /* 公共样式 */ }或抽成统一类名如.title - ⚠️ 别硬套：
:is(.card, .modal) :is(h2, h3)看似聪明，但语义混乱、权重难控，维护时极易出错
真正容易被忽略的是：你写的每一条 :is() 规则，在 Safari ≤15.3 或旧版 Chrome 里都会被整行丢弃，且控制台几乎不报错；而一旦括号里有一个拼写错误（比如 h7），整条规则也静默失效。别把它当“智能批量工具”，它只是个谨慎的语法糖——用之前，先确认环境兜得住、语义对得上、权重控得牢。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
