:is() 和 :where() 权重不同：:is() 取内部最高权重，:where() 恒为0；前者用于提权覆盖，后者仅简化复用且需依赖外部权重，误用会导致样式失效或被反向覆盖。
:is() 和 :where() 的权重差异直接影响样式覆盖结果
两者语法相似但权重天差地别：:is() 中每个子选择器都参与特异性计算，而 :where() 整体权重恒为 0。比如 :is(.btn, a) 权重等同于 .btn（0,0,1,0），但 :where(.btn, a) 权重是 (0,0,0,0) —— 它不会覆盖任何带类名的规则。
常见错误现象：用 :where() 尝试“安全降权”后发现样式完全不生效，其实是被更低权重的其他规则（比如一个单纯 .link）反向覆盖了。
- 必须提权时，优先改用
:is()，而不是给外层加 ID 或 class - 若真要零权重，
:where()是唯一选择，但得确保它作用的选择器本身已有足够权重（例如写成nav :where(a, button)，靠nav提供元素权重） - 不要在
:where()里嵌套伪类，如:where(a:hover)—— 整个选择器权重仍为 0，且 hover 状态无法触发（部分旧浏览器直接忽略）
:is() 嵌套多层级时权重怎么算
:is() 不是“括号分组”，而是“取最大值”。它的权重等于其内部所有可匹配选择器中**最高权重的那个**，不是累加，也不是平均。
例如：article :is(h1, .title, #main-title) 的权重不是 (0,0,1,1) + (0,0,1,0) + (0,1,0,0) 的和，而是取 #main-title 的 (0,1,0,0)，最终整个选择器权重为 (0,1,0,1)（article 贡献一个元素权重）。
- 写
:is(.a, .b, .c)和只写.a权重一样，没意义；真正有用的是混用类型，如:is(button, [type="submit"], .submit-btn) - 避免
:is(div p span)这种写法——它权重是 (0,0,0,3)，远低于.wrapper .content span（0,0,2,1），反而更难覆盖 - Chrome 105+、Firefox 103+ 支持
:is()，但 Safari 15.4 之前只支持单层，嵌套:is(:is(...))会直接失效
兼容性 fallback 方案不能只靠 JS 检测
检测 :is() 是否可用，不能只用 CSS.supports('selector(:is(a))') —— Safari 15.2 返回 true，但实际渲染有 bug（比如忽略其中某个分支）。真实项目中更稳妥的是“渐进增强 + class 回退”。
- 先写降级规则：
.card-header, .card-body, .card-footer { padding: 1rem; } - 再写增强规则：
:is(.card-header, .card-body, .card-footer) { padding: 1.25rem; }（现代浏览器生效，老浏览器自动跳过整条规则） - 不要试图用 JS 动态加 class 模拟
:is()行为——DOM 遍历成本高，且无法响应动态插入的元素 - 对 IE11 或安卓 UC 内核等彻底不支持的选择器，BEM 命名仍是首选：
.card__header、.card__body分开控制，不拼选择器
为什么 :where() 在媒体查询里反而更危险
@media (prefers-reduced-motion) 里用 :where() 看似“安全”，实则放大风险：因为它的 0 权重，在媒体查询内部更容易被外部普通规则覆盖。比如你写了：
@media (prefers-reduced-motion) {
:where(button) { animation: none; }
}
button { animation: pulse 2s infinite; }
结果是动画照常运行——:where(button) 权重为 0，而 button 权重为 (0,0,0,1)，后者胜出。
- 正确写法是放弃
:where()，直接写button或加 class：.js-animate，再用 JS 控制开关 -
:where()只适合纯“复用简化”，比如统一重置一组元素的 margin：:where(h1, h2, h3) { margin-block-start: 0; }，且确保没有更高权重的同名规则存在 - 所有用到
:where()的地方，建议在构建阶段用 PostCSS 插件展开成并列选择器，避免运行时不可控
真正麻烦的不是写错 :is()，而是它看起来生效了，上线后在某个 Safari 版本里某几个分支突然不匹配——这种问题没法靠审查元素一眼看出，得靠真实设备组合测试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
