:is() 选择器

:is()

在实际开发中，你可能写过这样的代码:

.active a,
.active button,
.active label {
  color: steelblue;
}

但是通过is()选择器，你可以简化为:

.active :is(a, button, label) {
  color: steelblue;
}

:is()伪类选择器已经可用啦。

可以使用 :is() 对选择器的任何部分进行分组，例如，你可以像这样进行转换：

.section h2,
.aside h2,
.nav h2 {
  color: steelblue;
}

to:

:is(.section, .aside, .nav) h2 {
  color: steelblue;
}

且 :is() 不仅对父级和子级有用，它还可以选择多个相邻的选择器，例如：

button:is(:focus, :hover, :active) {
  color: steelblue;
}

button:is(.active, .pressed) {
  color: lightsteelblue;
}

相当于:

button:focus, button:hover, button:active {
  color: steelblue;
}

button.active, button.pressed {
  color: lightsteelblue;
}

:where() 是一个与 :is() 非常相似的伪类。它们看起来非常相似：

:where(.section, .aside, .nav) h2 {
  color: steelblue;
}

** 但不同之处在于 :where 的特异性(权重)为 0，而 :is() 始终采用列表中最高的选择器的特异性。**

猜猜这个 CSS 中的按钮是什么颜色?

:is(html) button {
  color: red;
}

:where(html) button {
  color: blue;
}

在上面的示例中，虽然:where() 位于 :is() 的下方，但 :is() 具有更高的特异性（is:(html)括号内的"html"特异性: 1，button特异性: +1 ），而:where(html)具有较低特异性的块（html: 0 ， button: +1 ）。

另一个相似但不同的伪类是 :has() 。 :has() 允许选择一个父级，其中包含与一个选择器（或一组选择器）匹配的子级。

:has() 的一个用例是，给包含图像或视频的链接取消下划线显示：

a { text-decoration: underline }

a:has(img, video) {
  text-decoration: none;
}

现在，如果默认情况下 a 元素有下划线，但其中有<img>或<video>，则任何匹配的a元素的下划线都将被删除。

还可以将其与 :is() 结合使用:

:is(a, button):has(img, video) {
  text-decoration: none;
}

当然，如今的CSS预处理器都能简单的做到以上要求且代码同样少。

.active {
  button, label, a {
    color: steelblue;
  }
}

但既然原生CSS提供了可用的解决方案，那么还是做一些了解更好。

End.