如何使用新的 CSS “:is()” 进行简单的元素定位

新的 css :is()伪类正在逐渐成为一种定位元素的好方法，可以节省代码行和代码行，并尽可能保持 CSS 的可读性。这是:matches()and演变的下一个阶段:any()，添加了一些额外的功能，并增加了选择器背后的语言的语义和直观程度。

在这个快速提示中，我们将熟悉它。让我们先看看这个伪类，在规范中正式称为“matches-any”，是如何在应用程序中使用的。然后我们将讨论它如何同时替换:matches()and :any()，以及为什么使用“is”这个词更有意义。

#CSS
:is() 选择器?
:any() 和 :matches() 的继任者
潜入我们的谈话中，这是我用 XD 制作的精美 gif，展示了 :is() 选择器语法可以做什么。为 chrome 开发者峰会感到高兴！https://t.co/0r2CcUx9Hv pic.twitter.com/wSuGOsDLvZ
— Λdam Λrgyle (@argyleink) 2019 年 11 月 7 日

:is() 的示例用法

您可能:is() 仅通过查看就可以直观地了解它的功能：它是一种测试元素是否为特定事物的方法，本质上是作为布尔值工作的，就像您在许多编程语言中会发现的那样。例如，在最简单的形式中，这两个选择器在功能上是相同的：

article {...}

:is(article) {...}

在这两种情况下，如果元素是article.

它还可用于通过逗号分隔列表检测单个声明中的多种类型的元素。例如，同样，这两个选择器在功能上是相同的：

article, section, aside {...}
:is(article, section, aside) {...}

就其本身而言，这可能看起来不是很有趣——如果有的话，这会增加复杂性——但当用于定位子元素时它会变得特别有用。例如，假设您想要定位h1元素，但前提是它们是article, sectionor元素的子aside元素。通常你需要写：

article h1,
section h1,
aside h1 {
font-weight: 900;
}

但是，通过使用is:()它可以压缩为：

:is(article, section, aside) h1 {
font-weight: 900;
}

当您有多个要测试的父元素和子元素时，它确实开始提高效率。如果h1您想要定位所有子标题元素，而不是像上面的示例中那样仅定位子元素，该怎么办？如果没有:is(), （并且为了说明而没有使用类），您将需要编写：

article h1, article h2, article h3, article h4, article h5, article h6,
section h1, section h2, section h3, section h4, section h5, section h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, {
font-weight: 900;
}

但:is()相反，您只需要：

:is(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
font-weight: 900;
}

为什么 :is() 替换 :any() 和 :matches()

在之前的“matches-any”规范草案中，这个伪类:matches()在随后被重命名为 :is()之前使用了这个名称。一个较旧的选择器又是，:any()但是它不支持复杂的选择器。:is():matches()

改为使用的主要原因:is()来自另一个以相反方式运行的布尔样式伪类，即:not(). 使用这个“matches-none”伪类，您可以将样式应用于除选择器集合之外的所有内容。

例如，之前我们针对所有属于article,section和aside元素的子标题。有了:not()我们可以定位所有不是这些元素子元素的标题：

:not(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
font-weight: 400;
}

:is()与配对具有良好的语法意义，因此使组合具有逻辑性和直观性，这是它取代and:not()的主要原因。也就是说，打字时间更短的事实也被认为是改进的原因之一。:any():matches()

当前状态和支持

“ :is()matches-any”伪类目前处于工作草案状态。

你现在可以在 Firefox、Chrome 和safari中试用它，但是这三种浏览器仍然使用旧:any()名称，它必须与供应商前缀一起使用。供 Firefox 使用:-moz-any()以及供 Chrome 和 Safari 使用:-webkit-any()。Chrome 和 Safari 也支持:matches().

后备

您还可以使用:any()and:matches()为:is(). 例如，一组跨浏览器的回退可能如下所示：

:-webkit-any(article, section, aside) h1 {
    font-weight: 900;
}
:-moz-any(article, section, aside) h1 {
    font-weight: 900;
}
:matches(article, section, aside) h1 {
    font-weight: 900;
}
:is(article, section, aside) h1 {
    font-weight: 900;
}

postCSS 背后的开发人员也在考虑添加自动将这些后备添加到您的代码中的功能。