CSS：IS，：wery and：：pseudo-class选择器工作

钥匙要点

• css pseudo-class选择器：is（），：wheing（）和：has（）提供了针对HTML元素的新方法。 ：IS（）选择器允许对多个元素进行更有效的样式，从而减少了对详细选择器字符串的需求。 ：where（）选择器的运行方式与：is（），但具有零特异性，使其可用于应用基线样式而无需提高特异性。 ：HAS（）选择器针对包含其他其他元素的元素，提供了一种已久的靶向父元素的方法。
：is（）和：where（）伪级选择器在所有现代浏览器中都受支持，但在Internet Explorer中不支持。 ：HAS（）选择器当前是新的，但预计到2023年将广泛使用。使用这些选择器可以简化CSS语法并减少CSS预处理器的需求。
• ：is（）和：where（）选择器的特异性不同。 ：IS（）选择器具有与其参数中最特定的选择器相同的特异性，而：where（）选择器的特异性为零。这对于CSS重置可能是实用的，CSS重置在没有特定样式的情况下应用样式的基线，无论特异性如何，都可以覆盖任何CSS的重置样式。
>
• CSS选择器允许您按类型，属性或HTML文档中的位置选择元素。本教程解释了三个新的选项：：is（），：wheing（）和：has（）。 选择器通常在样式表中使用。以下示例找到了所有

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

您还可以使用JavaScript中的选择器来定位DOM节点：

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

document.queryselector（）返回第一个匹配的html元素

• document.queryselectorall（）返回类似数组的Nodelist中的所有匹配的HTML元素
伪级选择器基于其当前状态靶向HTML元素。也许最著名的是：悬停，它在光标移动到元素上时采用样式，因此它用于突出可点击的链接和按钮。其他流行的选项包括：
：访问：匹配访问链接

：目标：与文档URL
• 靶向的元素匹配
：第一个孩子：针对第一个子元素
：nth-​​child：选择特定的子元素
：空：匹配没有内容或子元素的元素
：检查：匹配一个切换的复选框或单选按钮
：空白：样式一个空输入字段
：启用：匹配启用的输入字段
：禁用：匹配禁用输入字段
：必需：目标一个必需的输入字段
• >
：有效：匹配有效的输入字段
：无效：匹配一个无效的输入字段
：播放：定位播放音频或视频元素

浏览器最近收到了另外三个伪级选择器…

css：是伪级选择器

注意：最初指定为：matches（）和：any（），但是：is（）已成为CSS标准。 您通常需要将相同的样式应用于多个元素。例如，

段落文本默认为黑色，但是当它出现在，或中时灰色：

这是一个简单的例子，但是更复杂的页面将导致更复杂和更详细的选择器字符串。任何选择器中的语法错误都可以打破所有元素的样式。 CSS预处理器，例如SASS许可证嵌套（也将介绍给本机CSS）：

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

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

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

>直到本地筑巢到达，您将需要一个CSS构建工具。您可能需要使用SASS之类的选项，但这可能会引入某些开发团队的并发症。
• 嵌套会导致其他问题。构造深嵌套的选择器变得越来越难以阅读和输出冗长的CSS。
：is（）提供了一个本机CSS解决方案，该解决方案在所有现代浏览器（不是IE）中都具有全部支持：
• 单个选择器可以包含任何数字：IS（）伪级。例如，以下复杂选择器将绿色文本颜色应用于所有

  ，

  和

  元素，这些元素是的孩子，该具有一类。 的第一个孩子：

不含：IS（）的等效代码需要六个CSS选择器：

请注意：IS（）无法匹配:: pseudo-emlements之后，因此此示例代码将失败：

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

css：pseudo-class选择器

<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>

：withing（）选择器语法与：IS（）相同，并且在所有现代浏览器（不是IE）中也得到了支持。它通常会导致相同的样式。例如：

<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>

差异是

>特异性

。特异性是用于确定哪些CSS选择器应覆盖所有其他算法的算法。在下面的示例中，第P条比单独的P更具体，因此中的所有段落元素都是灰色的：

<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>

如果是：is（），特异性是其参数中最特定的选择器。如果是：where（），特异性为零。 考虑以下CSS： 让我们将此CSS应用于以下HTML： 如下所示，段落文本将被涂上红色。

<span><span>:where(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

请参阅笔 使用：IS sitepoint（@SitePoint）的选择器 在codepen。

<span>article p { color: #444; }
</span><span>p { color: #000; }
</span>

上：IS（）选择器具有与文章P的特异性相同的特异性，但是在样式表的稍后，因此文本变成红色。有必要删除p和：IS（）选择器以应用蓝色的颜色，因为：where（）选择器比任何一个都不具体。 将使用更多的代码库：IS（）而不是：whese（）。但是，零特异性的零特异性：（）对于CSS重置可能是实用的，CSS重置是在没有特定样式的情况下应用标准样式的基线。通常，RESETS应用默认字体，颜色，桨和边距。 此CSS重置代码将1EM的最高边距应用于

标题，除非它们是元素的第一个孩子：

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

试图在样式表的稍后设置自定义

没有效果，因为文章：第一孩子具有更高的特异性：

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

您可以使用更高特异性的选择器来解决此问题，但对于其他开发人员来说，它是更多的代码，不一定是显而易见的。您最终会忘记为什么需要它：

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

您还可以通过应用于每种样式的重要性来解决问题，但是请避免这样做！ 一个更好的选择是在您的CSS重置中采用零特异性：white（）：

<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

现在，无论特异性如何，您都可以覆盖任何CSS重置样式；无需进一步的选择器或！重要：

<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>

<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>

CSS：具有伪级选择器

：has（）选择器使用类似的语法为：is（）和：wheing（），但它针对一个

包含>的元素。例如，这是在任何包含一个或多个>或标签的链接中添加蓝色的两金边框的CSS： 这是几十年来最令人兴奋的CSS发展！

<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>

开发人员终于有一种方法来瞄准父元素！ 难以捉摸的“家长选择器”一直是最要求的CSS功能之一，但它会使浏览器供应商的性能并发症，因此已经很长时间了。用简单的术语：

浏览器在页面上绘制时将CSS样式应用于元素。因此，在添加进一步的子元素时，必须重新绘制整个父元素。
• >
添加，删除或修改JavaScript中的元素可能会影响整个页面的样式，直至封闭。
• 。

假设供应商已经解决了绩效问题，则引入了：HAS（）允许在过去的JavaScript上可能是不可能的。例如，当任何必需的内部字段无效时，您可以设置外部形式

的样式

和以下提交按钮：

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

此示例添加了一个导航链接子enu指标，其中包含一个子菜单项列表：

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

或者，也许您可​​以添加调试样式，例如突出显示所有元素而没有内部IMG：

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

在您跳入编辑器并重构CSS代码库之前，请注意：HAS（）是新的，并且支持比：is（）和：where（）更有限。它可以在Safari 15.4和Chrome 101中提供，但在2023年之前应广泛使用。

选择器摘要

：is（）和：wheing（）伪级选择器简化了CSS语法。您对嵌套和CSS预处理器的需求更少（尽管这些工具还提供了其他好处，例如部分，循环和缩小）。 ：has（）更具革命性和令人兴奋的作用。父母的选择将迅速流行，我们将忘记黑暗时代！我们将在所有现代浏览器中可用时发布完整的：has（）教程。 如果您想对CSS伪级选择器进行更深入的研究，以及所有其他CSS（例如网格和Flexbox），请查看Tiffany Brown的《很棒的书》css Master 。

经常询问有关CSS的问题（FAQ）：is（）和：wheing（）伪级选择器

>

：is（）和：where（）pseudo-class选择器之间的主要区别是什么？在于它们的特殊性。 ：IS（）伪级选择器具有与放置在其中的选择器相同的特异性。另一方面，：where（）伪级选择器的特异性为零，这意味着它不会有助于选择器的整体特异性。当您要在不增加特异性的情况下将样式应用于一组元素时，这可能特别有用。

>我可以使用：is（）和：where（）pseudo-class selectors具有所有CSS属性？ >

是的，您可以使用：is（）和：wheing（）伪级选择器具有所有CSS属性。这些伪级选择器与特定的CSS属性无关。它们用于根据某些条件选择元素，您可以将任何CSS属性应用于选定的元素。

is：is（）和：where（）pseudo-class选择器在所有浏览器中支持？

>：is：is（）和：where（）pseudo-class选择器是CSS的相对较新的添加在大多数现代浏览器中支持。但是，在较旧的浏览器或某些版本的Internet Explorer中可能不支持它们。在使用代码中使用这些选择器之前，请检查网站上的当前浏览器支持总是一个好主意。

>如何使用：is：is（）pseudo-class selector在css中？ >

：IS（）在CSS中的伪级选择器允许您将多个选择器分组为一个。例如，您可以使用：is（）pseudo-class选择器像这样的h1，h2和h3编写三个独立的选择器，例如： }。

>我如何使用CSS中的pseudo-class选择器？ IS（）伪级选择器，但具有零特异性。例如，您可以使用它来选择具有特定类别的所有元素，而不会增加特异性：： where（.class1，.class2，.class3）{color：blue; 。当您要选择满足多个条件的元素时，这可能很有用。例如，您可以在类似的div元素中选择所有H1和H2元素：DIV：IS（H1，H2）{颜色：蓝色； }。

>我可以使用：is（）and：where（）伪级选择器带有伪元素的选择器吗？

是的，您可以使用：is（）和：where（）pseudo - 具有伪元素的类选择器。例如，您可以选择像这样的H1和H2元素的所有首字母：： IS（H1，H2）::第一字母{color：blue; }。

>我可以使用：is（）and：where（）pseudo-class选择器具有属性选择器？

是的，您可以使用：is（）和：where（）pseudo---具有属性选择器的类选择器。例如，您可以使用这样的数据属性选择所有元素：： IS（[data-attribute]）{颜色：blue; }。

>我可以使用：is（）和：where（）pseudo-class选择器具有类选择器？

是的，您可以使用：is（）and：where（）pseudo--类选择器的类选择器。例如，您可以选择所有类似某个类别的元素：： IS（.class1，.class2，.class3）{color：blue; }。

>我可以使用：is（）and：where（）pseudo-class选择器具有ID选择器的pseudo-class选择器吗？

是的，您可以使用：is（）和：where（）pseudo--具有ID选择器的类选择器。例如，您可以选择具有这样的ID的所有元素：： IS（＃ID1，＃ID2，＃ID3）{颜色：blue; }。

以上是CSS：IS，：wery and：：pseudo-class选择器工作的详细内容。更多信息请关注PHP中文网其他相关文章！