该用 :is() 而不是重复选择器，当需合并语义相近的选择器并保留最高权重（如标题、状态类），它解决权重爆炸问题；而 :where() 用于零权重安全覆盖，二者不可互换。
什么时候该用 :is() 而不是一堆重复选择器
当你发现写了类似 h1, h2, h3, h4, h5, h6 { line-height: 1.2; } 或者更糟的 .card-title, .modal-title, .sidebar-title, .tooltip-title { font-weight: bold; }，说明你已经在手动“合并”语义相近的选择器——:is() 就是为此而生的。它不是语法糖，而是解决「选择器权重爆炸」的实际工具。
关键点在于：它会取括号内所有选择器中最高权重的那个作为整个选择器的权重。比如 :is(.foo, #bar) span 的权重等同于 #bar span（因为 ID 选择器权重高于 class）。
- 适合场景：统一设置标题、表单控件、状态类（如
:is([disabled], [aria-disabled="true"])）的样式 - 注意陷阱：别在
:is()里混入高权重选择器（比如 ID 或内联style），否则整条规则权重被拉高，可能意外覆盖其他本该生效的样式 - 浏览器支持：Chrome 100+、Firefox 101+、Safari 15.4+；不支持时整条规则会被忽略（安全降级）
:where() 的真正价值：零权重 + 安全覆盖
如果你只想「确保某组元素一定按这个样式渲染」，又怕权重冲突压不过第三方库或 legacy CSS，:where() 是唯一解。它把括号内所有选择器的权重都归零——哪怕你写 :where(#nav, .header > ul > li a, [data-role="menuitem"]) { color: red; }，这条规则的权重仍是 0。
- 典型用途：CSS Reset、UI 组件库的基底样式（如按钮默认边框、输入框 focus outline）、需要强干预但不想污染全局权重的 patch 规则
- 和
:is()的核心区别：前者求「最大权重」，后者求「零权重」；选错会导致样式完全不生效或疯狂覆盖 - 不能用于 :not() 内部（如
:not(:where(...))无效），也不能嵌套自身，但可以嵌套:is()
常见错误：把 :is() 当成 JS 的 Array.includes()
:is() 不做逻辑判断，只做选择器匹配。它不会「跳过」无效语法，也不会「静默忽略」错误选择器——只要括号里有一个语法错误（比如多了一个未闭合的括号、非法字符），整个 :is() 表达式就失效，浏览器直接丢弃整条 CSS 规则。
- 错误示例：
:is(.btn, .btn-primary, .btn-[size=lg])—— 属性值含等号且未引号包裹，在部分浏览器中报解析错误 - 调试技巧：把括号内每个选择器单独提出来测试是否有效；用 DevTools 的 Styles 面板看规则是否被划掉（strikethrough）
- 兼容性兜底：可以用 PostCSS 插件（如
postcss-is-pseudo-class）转译，但注意转译后失去零权重优势，且无法还原:where()的语义
组合使用：用 :where() 重置，再用 :is() 精准增强
最实用的模式不是二选一，而是分层控制：先用 :where() 做无侵入基础样式，再用 :is() 在特定上下文中叠加语义化增强。比如处理表单控件：
/* 所有原生 input 默认去边框，零权重，不干扰现有样式 */
:where(input, select, textarea) {
border: none;
outline: 2px solid transparent;
}
<p>/<em> 仅在 .form-group 内，对特定类型启用 focus ring </em>/
.form-group :is(input:focus, select:focus, textarea:focus) {
outline-color: #007bff;
}</p>
这种写法既避免了全局 input { border: none } 可能破坏已有布局，又不用为每个控件单独写:focus规则。真正难的是想清楚哪一层该「让步」、哪一层该「主张」——权重设计本身就是 CSS 架构的一部分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
