js使用css元素定位_如何使用新CSS“：is（）”轻松进行元素定位

js使用css元素定位

新CSS :is()伪类正逐渐成为一种以元素为目标的好方法，它节省了代码行，并保持CSS尽可能可读。 这是:matches()和:any()进化的下一阶段，增加了一些额外的功能并提高了选择器背后语言的语义和直观性。

在这个快速提示中，我们将熟悉它。 让我们首先来看一下如何在应用程序中使用此伪类（在规范中正式称为“ matches-any”）。 然后，我们将讨论它如何同时替换:matches()和: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()的功能 只是看一下：这是一种测试元素是否存在的方法 是某一个事情，因为像一个布尔基本工作if你在许多编程语言找到。 例如，这两个选择器的最简单形式在功能上是相同的：

article {...}

:is(article) {...}

在这两种情况下，如果元素是 article则样式都会激活。

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

article, section, aside {...}

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

就其本身而言，这似乎不太有趣-可能会增加复杂性-但在用于定位子元素时特别有用。 例如，假设您要定位h1元素，但仅当它们是article ， section或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()有意义的主要原因:is()另一个布尔型伪类，它以相反的方式起作用，即:not() 。 使用这种“不匹配”伪类，您可以将样式应用于除选择器集合之外的所有内容。

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

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

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

现状和支持

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

您现在几乎可以在Firefox，Chrome和Safari中进行尝试，但是所有这三种浏览器仍然使用旧的:any()名称，该名称必须与供应商前缀一起使用。 对于Firefox使用:-moz-any() ，对于Chrome和Safari使用:-webkit-any() 。 Chrome和Safari也支持:matches() 。

后备

您也可以使用:any()和: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背后的开发人员也在考虑增加自动将这些后备添加到您的代码中的功能。

结语

:is()伪类将使使用香草CSS处理比以前更复杂的元素定位变得可行，而以前我们很可能需要预处理器来处理任务。 我们都可以期待它脱离草案状态并获得完整的浏览器支持。

有关更多信息，请查看下面列出的链接：

相关链接

• ：is（）W3C规范草案
  
• ：is（）在CanIUse.com
  
• MDN Web文档-：is（）（：matches（），：any（））
• MDN Web文档-：not（）
  

了解有关CSS选择器的更多信息

翻译自: https://webdesign.tutsplus.com/articles/new-css-is-for-easy-element-targeting--cms-34223

js使用css元素定位