1. 什么是选择器
在CSS中，选择器用于选择匹配特定元素的样式规则。当浏览器解析HTML文档时，会根据选择器的规则，将对应的样式应用到匹配的元素上。这也就意味着，掌握选择器的使用技巧非常重要。
1.1 选择器的基本语法
CSS选择器的基本语法如下：
selector {
property: value;
}
其中，selector表示要匹配的元素，property表示要设置的样式属性，value表示属性的值。
CSS选择器有很多种分类方法，按照使用频率和重要性，可以分为以下几类：
标签名选择器
类选择器
ID选择器
后代选择器
子元素选择器
相邻兄弟选择器
通用选择器
1.2 is选择器
is选择器是CSS3中新增的一种选择器，它可以让我们在选择元素时更加灵活。它的基本语法如下：
:is(selector1, selector2, ..., selectorN) {
property: value;
}
其中，:is()表示选择器函数，selector1, selector2, ..., selectorN是支持的选择器类型，可以是标签名选择器、类选择器、ID选择器、属性选择器等。
is选择器的用法非常简单，它可以匹配包含任意一个选择器的元素。比如：
:is(h1, h2, h3, h4, h5, h6) {
color: blue;
}
这段代码表示将页面中所有h1-h6标签的文字颜色都设为蓝色。
1.3 where选择器
where选择器是CSS3中新增的另一种选择器，它与is选择器类似，但是功能更加强大。它的基本语法如下：
:where(selector1, selector2, ..., selectorN) {
property: value;
}
其中，:where()表示选择器函数，selector1, selector2, ..., selectorN是支持的选择器类型，可以是标签名选择器、类选择器、ID选择器、属性选择器等。
where选择器与is选择器的区别在于，它的作用是对选择器进行剪枝，将原本无法匹配到任何元素的选择器去掉，从而提高选择器效率。比如，下面这段代码：
p :where(em b) {
color: blue;
}
它的含义是，将文档中所有p元素中出现的em b子元素中的文字颜色设为蓝色。使用where选择器可以剪枝掉不需要的选择器，提高效率。
2. is和where选择器的使用场景
2.1 根据不同状态设置样式
is和where选择器可以非常方便地根据不同状态为元素设置样式。比如，我们可以为输入框在获取焦点时和失去焦点时设置不同的样式：
input:is(:focus, :hover) {
border: 2px solid blue;
}
input:where(:not(:focus):not(:hover)) {
border: 1px solid gray;
}
这段代码表示，在输入框获取焦点或鼠标悬停时，将边框设为蓝色；失去焦点或离开鼠标悬停状态时，将边框设为灰色。
2.2 根据浏览器不同设置样式
is和where选择器还可以根据浏览器的不同，设置不同的样式。比如，我们可以为Chrome浏览器中的h1标签设置红色文字，其它浏览器中的h1标签设置黑色文字：
:is(h1:where(:-webkit-full-screen), h1:-webkit-full-screen) {
color: red;
}
h1:where(:not(:-webkit-full-screen)) {
color: black;
}
这段代码表示，当h1元素处于Chrome浏览器全屏状态时，将文字设为红色；当h1元素不处于Chrome浏览器全屏状态时，将文字设为黑色。
2.3 根据不同的同辈元素设置样式
is和where选择器还可以根据元素在文档中的位置，选择不同的样式。比如，我们可以为第一个和最后一个h1标签设置不同的样式：
h1:first-of-type {
color: red;
}
h1:last-of-type {
color: blue;
}
h1:where(:not(:first-of-type):not(:last-of-type)) {
color: black;
}
这段代码表示，将第一个h1元素的文字颜色设为红色，将最后一个h1元素的文字颜色设为蓝色；其它h1元素的文字颜色设为黑色。
3. 总结
is和where选择器是CSS3中非常实用的选择器，它们可以让我们更加灵活地为元素设置样式。使用is和where选择器可以大大简化CSS代码，提高效率。在编写CSS样式时，我们应该充分利用这两个选择器的功能，以达到优化代码、提高效率的目的。
参考资料：