“is” 有用吗？ | CSS-Tricks

我的天，我真有趣。

每当我们遇到相当重复的选择器且它们具有共同的父级时，这可能就是我们可以使用 :is() 伪选择器的地方。

Holger Bartel 演示如下

section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1 {
  font-size: 20px;
}

变成

:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
  font-size: 20px;
}

Adam Argyle 演示如下

#CSS

：is() 选择器 🎉
：any() 和 :matches() 的继任者

偷偷看一下我们的演讲，这里有一个我在 XD 中制作的漂亮 GIF，展示了 :is() 选择器语法可以做什么。期待 Chrome Dev Summit，大家！https://#/0r2CcUx9Hv pic.twitter.com/wSuGOsDLvZ

— Adam Argyle (@argyleink) 2019 年 11 月 7 日

MDN 有一个更戏剧性的版本

ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
  list-style-type: square;
}

它代码更少，也更容易理解。

Kezz Bracey 注意到将其与 :not() 配合使用也很不错

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

浏览器支持才刚刚开始，并且很难进行 polyfilling，所以我们还没有达到每天都可以轻松使用的程度。我敢打赌它不会太远了。

Noah

# 2020 年 1 月 3 日

很棒的演示，我现在完全理解 :is 了！如果您使用编译器，这会增加额外的负担，但对于原生 CSS 来说，这将极大地提高可读性

Ramesh

# 2020 年 1 月 3 日

我当时看到了 Adam 的推文，但无法理解 :is() 到底在做什么，即使这里的所有示例也帮不了太多。我真的不明白
：is(section, article, aside, nav) ：is(section, article, aside, nav) { font-size: 20px; }
相当于显示的代码！请您详细解释一下，就像您正在向第一次听到这个概念的人解释一样。谢谢

John

评论永久链接# 2020 年 1 月 3 日

这里有一个简化的示例

section section h1, section article h1 { ... } 与 section *:is(section, article) { ... } 相同

所以它基本上与 OR 语句相同。（另外请注意，我添加了一个 * 使示例更清楚。）
aror

评论永久链接# 2020 年 1 月 4 日

您是不是漏掉了 h1？

Troy

# 2020 年 1 月 3 日

今天学到了新东西。我甚至不知道这个 CSS 选择器。感谢您提供快速且易于理解的示例。

Ian

# 2020 年 1 月 3 日

就我个人而言，我不记得需要像 :is() 这样的选择器，而我遇到过很多需要使用像 :has() 这样的选择器的情况。

Kuba

# 2020 年 1 月 4 日

假设 MDN 示例，:is() 与一系列显式选择器相比性能如何？

Dalibor Sojic

# 2020 年 1 月 4 日

性能如何？ “is” 更慢吗？

Chris Coyier

评论永久链接# 2020 年 1 月 5 日

我认为这属于 不必担心 的类别。除非您处于非常非常密集的 DOM 情况（例如渲染一百万个节点），否则 CSS 选择器性能几乎永远不会是一个大问题（在过去 20 年中，我从未对此进行过优化）。 MDN 确实有一条说明 :-moz-any 性能较差，因为它与 * 相同，而我个人会随意使用它，并且 :is 旨在解决这种“糟糕”的性能。

Grant

# 2020 年 1 月 4 日

MDN 示例可以使用 :is(ul, menu, dir) 进一步简化

rzxrzx

# 2020 年 1 月 4 日

:is(item1, item2, .... ) { color: "black" }

基本上意味着匹配括号内的任何内容，它将匹配/转换为

item1 { color: "black"}
item2 { color: "black"}
... { color: "black"}

它就像 CSS 的 inArray() 函数。
CSS 真的很棒。

roberto

评论永久链接# 2020 年 1 月 6 日

.item1,.item2{ color: “black” } 有什么不同？我不明白。

tombakerim

# 2020 年 1 月 5 日

请您详细解释一下，就像您正在向第一次听到这个概念的人解释一样。

Yexan

# 2020 年 1 月 6 日

感谢 Chris 的文章。

它让我想起了我们过去是如何声明占位符的

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

如果我们将所有特定于浏览器的选择器组合到相同的规则中，例如

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder { 
  color: pink;
}

它将使整个块失效。 :D

顺便说一句，这是一个不错的功能，即使我仍然更喜欢使用 SASS :)

ol, ul, menu, dir
  ol, ul, menu, dir
    ul, menu, dir
      list-style-type: square

Laurie Jones

# 2020 年 1 月 9 日

感谢 Chris！我觉得有趣的是，MDN 的示例仍然定义了三个规则，而不仅仅是这个

:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

但是点击进入 MDN 页面，他们明确指出这很慢，并建议不要对最右侧的选择器使用 :is()。我想我需要牢记这一点。

此评论线程已关闭。如果您需要分享重要信息，请联系我们。