:is()专治“重复祖先路径+多个后代选择器”，如.card :is(h1, h2, .meta)可替代三行冗余写法，但括号内任一选择器错误会导致整条规则静默失效。
:is() 不是用来“扁平化嵌套深度”的，而是专治「重复祖先路径 + 多个后代选择器」这类冗余写法。它能直接把三行以上结构一致的选择器压成一行，但用错地方反而让样式失效或权重失控。
什么时候该用 :is() 而不是逗号分组
当你反复书写同一段祖先路径时，比如 .card h1、.card h2、.card .meta，传统逗号写法要复制三次 .card —— 改类名时漏改一个就出问题，查 bug 得横向扫三行。
这时候用 .card :is(h1, h2, .meta) 更稳：祖先只写一次，语义也清晰（“在 .card 里的这些元素”）。
- 适用场景：组件内部统一控制子元素，如
.post > header :is(h1, h2, h3)、.form-group :is(input, select, textarea) - 不适用场景：跨不同祖先的合并（如
header p, footer p），应写成:is(header, footer) p，而不是:is(header p, footer p) - 注意：括号里任意一个选择器拼错（比如
h66），整条规则会被浏览器静默丢弃，样式完全不生效
:is() 的权重怎么算？为什么有时覆盖不了旧样式
:is() 的特异性（权重）取括号内**最高权重的选择器**，不是平均值，也不是固定值。这点和 :where() 有本质区别。
立即学习“前端免费学习笔记（深入）”；
例如：:is(.btn, #submit-btn) { color: red; } 这条规则的权重等同于 #submit-btn（0,1,0），哪怕你只想微调 .btn，它也会因权重飙升而意外压过其他组件样式。
-
.card :is(h1, .title)权重 =.card .title（0,0,2） -
:is(h1, [data-role="title"])权重 =[data-role="title"]（0,0,1） - 如果想保持低权重又图简洁，换
:where()—— 它永远返回 0 权重，适合 reset 或基础排版
哪些写法会直接让整条规则失效
浏览器看到非法的 :is() 用法，不会忽略括号内容，而是直接丢弃整条 CSS 规则 —— 没警告，没 fallback，样式就没了。
- 禁止包含伪元素：
.box :is(h2::after, p)→ 整条失效 - 禁止带函数参数的伪类：
:is(.item:nth-child(2n))→ 报错，规则被跳过 - 冒号前不能有空格：
.card:is(h1, p)是错的（这会被解析为伪类作用于.card元素本身），正确是.card :is(h1, p) - 旧版 Safari ≤15.3 不支持
:is()，只认已废弃的:matches()，且不支持伪元素；关键样式必须手动补兼容规则，比如先写.card h1, .card p { ... }，再覆盖写.card :is(h1, p) { ... }
嵌套 :is() 和混用 :not() 的实际限制
可以嵌套，但没必要深套。比如 :is(.a, :is(.b, .c)) 合法，但可读性差，调试困难；多数情况一层 :is() 就够用。
和 :not() 连用时要注意语法边界：:not() 本身不接受选择器列表，但你可以用 :is() 绕开：
- ❌ 错误：
div:not(.a, .b)（语法非法） - ✅ 正确：
div:not(:is(.a, .b)) - ⚠️ 注意：
:not(:is(.a, .b))的权重由:is()内部最高项决定，不是div自身权重
真正容易被忽略的是容错性假象：括号里某个选择器无效（比如拼错标签名或属性名），其余都白写；上线后发现某块样式突然消失，第一反应不该是怀疑浏览器兼容，而是打开 DevTools 检查 :is() 括号里有没有 typo。
