:is()取括号内最高权重，:where()恒为0-0-0；前者易因混入id或错误选择器提权或失效，后者需依赖外部选择器提供权重才能生效，二者均非简化工具而是权重控制机制。
:is() 和 :where() 都不能“简化权重”，它们根本上是控制权重的工具——一个会提权，一个主动弃权。想靠它们“降低复杂度”却忽略权重逻辑，反而会让样式更难预测。
为什么 :is() 会意外提升选择器权重
:is() 不是分组括号，它是“取最大值函数”。浏览器会扫描括号内所有合法选择器，挑出 specificity 最高的那个，用它的权重作为整条规则的权重。
- 写
:is(.btn, #primary)，整条规则权重变成1-0-0（ID 级），不是0-1-0 - 写
:is(button, [type="submit"], .submit-btn)，权重由[type="submit"]（类名级）或更重项决定，不是平均值 - 哪怕只混入一个拼错的选择器（如
:is(.a, .b, .c-)），部分 Safari 会直接丢弃整条规则，而不是忽略错误项
为什么 :where() 常常“不生效”
:where() 的权重恒为 0-0-0，它不参与层叠竞争。它起效的前提，是外部选择器本身有足够权重支撑。
-
:where(button, a)单独使用，权重为0-0-0，连div（0-0-1）都压不过，样式必然被覆盖 - 正确写法必须带外部锚点：
.card :where(.title, .subtitle)—— 权重只算.card那部分（0-1-0） -
!important对:where()无效：权重为 0 的声明加!important，仍会被任何非零权重规则覆盖
什么时候该换函数名，而不是硬调权重
别把 :is() 当成“简化写法”的自动开关，也别把 :where() 当成“安全兜底”的万能药。关键看目标：
- 要统一增强一组元素的交互态（如 hover/focus）？用
:is()，但确保括号内全是同级权重项，比如全用类名：:is(.btn, .link, .cta):hover - 要做全局重置或设计系统基底（如
margin: 0、cursor: default）？用:where()，且必须配强外部选择器：* :where(button, input[type="button"]) { cursor: default; } - 需要兼容旧版 Safari（15.2–15.3）？避免在
:is()里塞任何可疑选择器；考虑用@supports selector(:where(*))做渐进增强
真正容易被忽略的点是：权重不是写出来就固定的，而是由浏览器实时计算并参与层叠的。你改一个 :is() 里的 ID 选择器，可能让整页按钮样式突然失效；你漏写一个外部容器类名，:where() 就彻底隐身。调试时直接看开发者工具的 “specificity” 栏，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
