在CSS的迭代发展过程中，新增的选择器不断为开发者提供更高效的样式编写方式，is选择器和where选择器就是其中非常实用的两个特性，它们可以帮助开发者简化复杂的选择器逻辑，减少重复代码的编写。
is选择器的基本用法
is选择器允许开发者将多个选择器组合成一个逻辑组，匹配其中任意一个选择器的元素都会应用对应的样式，语法格式为:is(选择器1, 选择器2, ...)。
比如我们需要给不同层级的标题设置相同的字体大小，传统写法需要重复写多个选择器：
/* 传统写法 */
h1, h2, h3, .title, #header-title {
font-size: 24px;
color: #333;
}
使用is选择器后可以简化为：
/* 使用is选择器简化 */
:is(h1, h2, h3, .title, #header-title) {
font-size: 24px;
color: #333;
}
is选择器还支持嵌套使用，比如我们需要选中article和section下的段落元素：
/* 嵌套使用is选择器 */
:is(article, section) p {
line-height: 1.8;
text-indent: 2em;
}
where选择器的基本用法
where选择器的语法和is选择器非常相似，格式为:where(选择器1, 选择器2, ...)，同样匹配括号内任意一个选择器的元素并应用样式。
和is选择器的基础功能类似，下面的代码可以实现和前面is选择器示例相同的效果：
/* 使用where选择器 */
:where(h1, h2, h3, .title, #header-title) {
font-size: 24px;
color: #333;
}
where选择器同样支持嵌套组合，比如选中不同容器下的按钮元素：
/* 嵌套使用where选择器 */
:where(.card, .modal) :where(.btn-primary, .btn-secondary) {
padding: 8px 16px;
border-radius: 4px;
}
is与where选择器的核心区别
这两个选择器最大的差异在于优先级的计算规则，这也是开发者需要重点掌握的内容。
优先级计算差异
is选择器的优先级等于其括号内优先级最高的那个选择器的优先级。比如下面的代码中，is选择器括号内包含id选择器#header-title，所以整个is选择器的优先级等同于id选择器的优先级：
/* is选择器优先级由最高的#header-title决定，等同于id选择器优先级 */
:is(h1, .title, #header-title) {
color: red;
}
/* 类选择器优先级低于id，所以这个样式不会生效 */
.title {
color: blue;
}
而where选择器的优先级始终为0，无论括号内包含什么优先级的选择器，都不会提升整体优先级。同样的逻辑用where选择器实现时，类选择器的样式会生效：
/* where选择器优先级为0 */
:where(h1, .title, #header-title) {
color: red;
}
/* 类选择器优先级高于0，所以这个样式会生效 */
.title {
color: blue;
}
兼容性差异
is选择器是CSS Selectors Level 4规范中的特性，现代浏览器基本都已经支持，而where选择器同样属于该规范，目前主流浏览器的支持情况和is选择器基本一致，在开发时可以根据项目兼容性要求选择使用。
实际应用场景
简化重复选择器代码
当多个选择器需要应用相同样式时，使用is或者where选择器可以减少代码冗余，比如给不同状态的表单元素设置统一样式：
/* 简化表单状态样式 */
:is(input, textarea):is(:focus, :hover) {
border-color: #1890ff;
outline: none;
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
低优先级基础样式定义
如果需要定义一些容易被覆盖的基础样式，优先使用where选择器，避免优先级过高导致后续样式无法覆盖的问题：
/* 低优先级的基础按钮样式，方便后续覆盖 */
:where(button) {
border: 1px solid #d9d9d9;
background: #fff;
cursor: pointer;
}
/* 自定义按钮样式可以轻松覆盖基础样式 */
.submit-btn {
background: #1890ff;
color: #fff;
border-color: #1890ff;
}
注意事项
- is和where选择器都不支持伪元素选择器作为括号内的参数，比如
:is(::before, ::after)是无效的语法。 - 选择器列表内如果包含浏览器不支持的选择器，整个is或者where选择器规则会被浏览器忽略，使用时需要注意兼容性处理。
- 不要过度嵌套使用这两个选择器，否则会降低代码的可读性，反而增加维护成本。
总结
is选择器和where选择器都是CSS中非常实用的选择器特性，is选择器适合需要保留原有选择器优先级的场景，where选择器适合需要定义低优先级基础样式的场景。合理运用这两个选择器，可以有效简化CSS代码，提升样式的可维护性，帮助开发者写出更优质的CSS代码。