:is()取内部最高权重，:where()恒为0；前者如:is(.a,.b,#c)权重同#c，后者外层选择器仍计权，如.card :where(img)权重为(0,0,1,0)。
:is() 和 :where() 的优先级根本不是“混乱”，而是规则极其明确：前者取内部最高权重，后者恒为 0。用错的关键往往不是记不清规则，而是误判了括号内选择器本身的权重构成。
为什么 :is(.a, .b, #c) 会压过所有类名选择器
:is() 不是分组别名，它参与 specificity 计算的方式是“取最大值”——整个函数的权重等于其内部可匹配子选择器中权重最高的那个。所以 :is(.a, .b, #c) 的权重就是 #c 的 (0,1,0,0)，不是三个类加起来的 (0,0,3,0)。
- 常见错误现象：
:is(.btn, .btn-primary, .btn-secondary):hover写完发现 hover 样式总被第三方.ui-button:hover覆盖，其实是因为你漏看了第三方用了 ID 或属性选择器，而你的:is()里全是类名，权重天然低 - 真正有用的是混类型写法：
:is(button, [type="submit"], .submit-btn)，这样既能覆盖原生按钮，又能兜住自定义类，且权重由[type="submit"]（属性选择器，c=1）或.submit-btn（类，c=1）决定，比纯标签高，又不至于高到难覆盖 - 避免写
:is(div p span, .wrapper .content li)这类组合器嵌套——它会把 d 值拉高（如div p span是 d=3），反而不如一个干净的.list-item（c=1）好维护、易覆盖
为什么 :where() 写了却没生效，其实是被“零权重”反杀
:where() 括号内的部分权重归零，但**外层选择器照常计权**。比如 .card :where(img) 的权重是 .card 的 (0,0,1,0)，不是 0；而 :where(.card img) 才是整条归零——但这时它连 .card 的上下文都丢了，匹配不到目标元素。
- 常见错误现象：在响应式重置里写
@media (max-width: 480px) { :where(img) { width: 100%; } }，结果被.post-content img覆盖，不是:where()失效，而是这条规则权重为 0，而.post-content img权重是 (0,0,2,1)，声明顺序靠后也赢不了 - 正确做法是靠外层提权：
article :where(img, iframe)或main :where(img)，让article或main提供基础权重，内部保持零干扰 - 千万别在
:where()里塞伪类：:where(a:hover)合法但无效——整条规则权重为 0，且 Safari 15.3 及更早版本直接忽略，控制台可能只报 “InvalidSelectorError”
如何验证和调试这两个伪类的真实权重
浏览器 DevTools 的 “Computed” 面板显示的 specificity 值最可信，但要注意：它只显示最终计算结果，不告诉你哪部分来自 :is() 或 :where()。必须手动拆解。
- 打开 Elements 面板 → 选中目标元素 → 切到 Computed → 找到对应样式 → 看右侧 specificity 值。若为 (0,0,0,0)，基本可断定是
:where()或其外层无有效选择器 - 遇到样式不生效，先检查语法：多一个逗号（
:is(.a,,.b)）、少一个括号、或写了:is(:hover)这种非法伪类，整条 CSS 规则会被浏览器静默丢弃，连带整个@media块失效 - 兼容性不能只靠
@supports selector(:is(*))：Safari 15.2 返回 true，但实际解析有 bug（比如跳过:is(h1, h2, h3)中的h3分支），真实项目必须搭配降级写法，例如先写.card-header, .card-body { padding: 1rem; }，再写:is(.card-header, .card-body) { padding: 1.25rem; }
最易被忽略的一点：权重归零不等于“无条件生效”。:where() 规则仍受层叠顺序影响，且会被任何带 !important 的声明压制——哪怕那条声明来自一个纯标签选择器 img { width: 100% !important; }。它解决的是“不想拼权重”的问题，不是“想赢就赢”的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
