:is()权重取括号内最高specificity选择器的值，:where()权重恒为0-0-0；前者适合统一增强样式，后者用于零干扰场景如css reset。
:is() 的权重取决于括号内最重的选择器
它不是加总、也不是平均，而是直接取 :is() 括号里所有合法子选择器中 specificity 最高的那个。比如 :is(.btn, #header, [data-id]) 整条规则的权重就是 #header 的 1-0-0，哪怕你只打算匹配按钮。
常见错误现象：:is(.a, .b, .c) 和单独写 .a 权重完全一样——三者都是 0-1-0，没带来任何提升；真正有用的是混用类型，例如 :is(button, [type="submit"], .submit-btn)，此时权重由 [type="submit"]（0-1-0）或更重的选择器决定。
-
:is()不支持伪元素（如.a::before）和非法伪类（如单独写:hover） - 括号内任意一个选择器语法错误（比如多逗号、空项
:is(.a, )），整条 CSS 规则会被浏览器静默丢弃 - Safari 15.4 之前不支持嵌套
:is(:is())，会直接失效
:where() 的权重恒为 0-0-0
:where() 不参与层叠竞争，无论里面塞了 #nav 还是 div ul li a，整个伪类的权重始终是 0-0-0。它只靠外部选择器“借力”，比如 nav :where(a, button) 的权重只算 nav 那部分（0-1-0）。
典型误用场景：以为 :where() 是“更安全的 :is()”，结果样式压根不生效——因为它连一个普通 div 标签选择器（0-0-1）都压不过。
-
!important对:where()无效：权重为 0 的声明加!important，仍会被任何非 0 权重规则覆盖 - 不能写
:where(a:hover)——旧 Safari 可能直接忽略整条规则 - 必须确保外部有足够权重支撑，否则它只是个摆设
为什么改个函数名，样式就失效或被覆盖？
根本原因在权重计算逻辑完全不同：:is() 取括号内**最高权重子选择器**参与整体特异性计算，而 :where() 整体权重恒为 0-0-0，不参与层叠竞争。
常见错误现象：:where(.btn, #primary) 看似想“兜底 + 提权”，实际整条规则权重是 0，连 button 标签选择器都压不过；反过来，:is(.btn, #primary) 的权重直接按 #primary（0-1-0）算，可能意外覆盖你本不想动的 .modal .btn 规则。
- 别在
:where()里塞 ID 或高权重选择器——它不会提升效果，只会制造误解 -
:is()嵌套多层级时权重怎么算才不翻车？记住它是“取最大值”函数，不是分组运算符 - 写
:is(div p span)这种纯标签链，权重是 (0,0,0,3)，比.wrapper .content span（0,0,2,1）还低，反而更难覆盖
什么时候该换函数名，而不是硬加权重？
:is() 适合增强已有样式的统一控制，比如给多个容器下的链接加 hover 态：:is(header, main, footer) a:hover；或者配合状态类做批量响应：:is(.dark, .light) .text。
:where() 只适合“加样式但绝不抢权”的场景，例如重置第三方库按钮边框、统一禁用某类元素光标、在 Vue <style scoped></style> 中穿透匹配而不破坏封装性。
- 用
:where()写重置样式时，不会干扰任何已有规则；用:is()写重置样式时，可能意外覆盖第三方组件的高权重要求（如 Ant Design 的.ant-btn） - 二者语法一致，替换只需改函数名，但行为天差地别——不能靠它“强制覆盖”，想覆盖别人样式？该用更高 specificity，而不是换伪类
- 兼容性必须手动处理：Chrome 105+、Firefox 103+、Safari 15.4+ 支持两者，但 Edge 17 及更早、所有 IE 版本完全不支持
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
