总览
css选择器允许你通过类型、属性、位于html文档中的位置来选择元素。本教程阐述了三个新选项:is()、:where()和:has()。
选择器通常在样式表中使用。下面的示例会找到所有

段落元素并将字重更改为粗体：

p {
font-weight: bold;
}
你也可以在JavaScript中使用选择器来找到dom节点：

document.querySelector()返回首个匹配的HTML元素。
document.querySelectorAll()返回所有匹配的HTML元素，这些元素位于类数组NodeList中。
伪类选择器根据HTML元素的当前状态来定位它们。也许最广为人知的是 :hover，它在光标移到一个元素上时应用样式，所以它被用来高亮可点击的链接和按钮。

其他受欢迎的选项包括：

:visited：匹配访问过的链接
:target：匹配文档URL所指向的元素
:first-child：指向第一个子元素
:nth-child：选择指定子元素
:empty：匹配没有内容或子元素的元素
:checked：匹配已勾选的复选框或单选按钮
:blank：选择用户输入为空的输入框
:enabled：匹配一个被启用的输入框。如果一个元素能够被激活（如选择、点击或接受文本输入），或者能够获取焦点，则该元素是启用的
:disabled：匹配一个被禁用的输入框。在被禁用时，元素不能被激活或获取焦点
:required：指向必填的输入框。所谓必填，就是在提交所属表单之前，用户必须为输入框指定一个值
:valid：匹配一个内容验证正确的输入框
:invalid：匹配一个内容未通过验证的输入框
:playing：指向一个正在播放的audio或video元素
浏览器最近又收到了三个伪类选择器…

:is伪类选择器
注意：这最初被指定为:matches()和:any()，蓝狮官网但:is()已经成为CSS标准。

MDN解释：:is()CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。

你经常需要在不止一个元素上面应用相同的样式。比如说，

段落文本颜色默认为黑色，但是当它位于，， 里面时，文本颜色为灰色：

/* default black */
p {
color: #000;
}

/* gray in , , or */
article p,
section p,
aside p {
color: #444;
}
这是一个简单的例子，但更复杂的页面将导致更复杂和更冗长的选择器字符串。任何选择器的语法错误都会破坏所有元素的样式。

像Sass这样的CSS预处理器允许嵌套（这也将出现在原生CSS中）。

article, section, aside {

p {
color: #444;
}

}
这可以创建相同的CSS代码，减少打字的工作量，并可以防止错误。但是：

在原生嵌套到来之前，你仍需要一个CSS构建工具。蓝狮注册你可能想使用像Sass这样的方案，但这可能给一些开发团队引入复杂性。
嵌套可能会导致其他问题。构建深度嵌套的选择器是很容易的，但它会变得越来越难以阅读以及输出冗长的CSS。
:is() 提供了一个原生CSS解决方案。该特性已被所有现代浏览器支持（IE除外）。

:is(article, section, aside) p {
color: #444;
}
单个选择器可以包含任意数量的:is()伪类。比如说，下面的复杂选择器将绿色文本颜色应用于所有

、

和元素，这些元素是的子元素，其包含类.primary或.secondary，并且不是的第一个子元素。 article section:not(:first-child):is(.primary, .secondary) :is(h1, h2, p) {
color: green;
}
没有 :is() 的同等代码需要六个CSS选择器。 article section.primary:not(:first-child) h1,
article section.primary:not(:first-child) h2,
article section.primary:not(:first-child) p,
article section.secondary:not(:first-child) h1,
article section.secondary:not(:first-child) h2,
article section.secondary:not(:first-child) p {
color: green;
}
注意，:is()无法匹配::before和::after伪元素，因此下面示例代码会不起作用： /* NOT VALID – selector will not work */
div:is(::before, ::after) {
display: block;
content: ”;
width: 1em;
height: 1em;
color: blue;
}
:where伪类选择器
:where()选择器语法与:is()相同，也被所有现代浏览器支持（IE除外）。这往往会导致相同的样式。比如： :where(article, section, aside) p {
color: #444;
}
不同点在于优先级。优先级是用来决定哪个CSS选择器应该覆盖所有其他选择器的算法。在下面的例子中，article p比单独的p更加具体，因此所有位于内的p元素的字体颜色将会是灰色： article p { color: #444; }
p { color: #000; }
在:is()的情况下，优先级是在其参数中找到的最具体的选择器。在:where()的情况下，优先级为零。 考虑下面的CSS： article p {
color: black;
} :is(article, section, aside) p {
color: red;
} :where(article, section, aside) p {
color: blue;
}