:is() 是仅在重复父路径+多子选择器时才适用的语法糖，语义清晰、维护成本低；错误用法会导致规则失效或权重失控，须配合 @supports 检测兼容性。
:is() 不是用来“提高复用性”的抽象工具，它本质是语法糖——只在**重复父路径 + 多个子选择器**这种明确场景下才值得用。其他情况硬套反而让逻辑更难懂、权重更难控。
什么时候该写 .card :is(h1, p, .meta) 而不是 :is(.card h1, .card p, .card .meta)
前者匹配「所有在 .card 内部的 h1、p、.meta」，语义清晰，改父类名只需动一处；后者等价于三条独立规则，但写法冗长，且一旦要加新子选择器（比如 .date），得手动补三遍 .card。
- 推荐用
.card :is(h1, p, .meta)：维护成本低，结构意图明确 - 避免
:is(.card h1, .card p, .card .meta)：没节省字符，还掩盖了共用路径 - 特别注意空格：
.card:is(h1, p)是错的——冒号前不能有空格，否则浏览器当伪类解析，直接报InvalidSelectorError
:is() 里能塞什么？哪些会静默失效？
它接受任意合法的简单选择器或组合选择器，但括号内每个项必须能独立存在。浏览器对非法内容不报错，而是整条规则丢弃。
- 允许：
:is(h1, [data-role="title"], .page-title)、:is(nav > ul, .menu-list) li a - 禁止：
:is(.a::before)（伪元素不行）、:is(:has(> img))（兼容性差，Chrome 105+ 才初步支持） - 容错但不安全：
:is(.valid, .inva!lid, .also-valid)中间那个错字会被跳过，其余生效；但如果你依赖权重，:is(.btn, #submit)的权重就是 ID 级（0-1-0），可能意外压过其他规则
为什么加了 :is() 样式突然不生效？
最常见原因不是语法错，而是浏览器直接忽略整条规则——因为遇到不支持的特性（如旧版 Safari ≤15.3）或非法选择器（如 ::before）。它没有渐进增强能力。
- 检查是否用了老 Safari：iOS 15.3 及更早只认
:matches()，且不支持伪元素 - 用
@supports selector(:is(*))做特性检测，包裹降级规则 - 关键样式别全靠
:is()：先写传统逗号分组（如.card h1, .card p），再覆盖写.card :is(h1, p) - 别嵌套
:is(:is(...))：Safari 15.4 之前完全失效，Chromium 旧版也可能触发解析异常
:is() 和 :where() 到底怎么选？
核心就一条：:is() 继承最高权重，:where() 权重永远是 0。这不是风格偏好，是行为差异。
- 要用悬停/焦点等交互效果 → 必须用
:is()：.btn:is(:hover, :focus)合法；.btn:where(:hover, :focus)不会触发任何状态 - 只想统一禁用光标、重置 margin 等兜底样式 → 用
:where()：:where(button, [role="button"]) { cursor: default; }不会干扰已有button:hover - 混用时注意顺序：
:where(.a) { color: red; }权重为 0，哪怕写在后面也赢不了.b { color: blue; }
:is() 规则，可能同时撬动两处逻辑——一是结构匹配范围，二是权重层级。它省的是键盘敲击次数，不是思考成本。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
