CSS :is 选择器

 完整CSS选择器参考手册 完整CSS选择器参考手册

实例

我们希望为包含 <p> 的标签设置颜色:

:is(p) { color: red; }

尝试一下 »

定义和使用

CSS 的 :is 伪类是一个通用选择器,它允许你将多个选择器组合在一起,以便在 CSS 规则中复用它们。

:is 伪类可以接收任何数量的选择器作为参数,并且返回这些选择器匹配的元素的并集。

1、组合元素类型选择器

:is(h1, h2, h3) {
    color: red;
}

这段代码将为所有的 h1、h2 和 h3 元素设置文本颜色为红色。

2、组合类选择器

:is(.highlight, .warning) {
    font-weight: bold;
}

这段代码将为所有具有 highlight 或 warning 类的元素设置字体加粗。

3、组合不同类型的选择器

:is(a[href^="https"], button[disabled]) {
    cursor: pointer;
}

这段代码将为所有以 https 开头的链接和禁用状态的按钮设置鼠标指针为指针形状。

注意

  • :is 伪类可以提高 CSS 代码的可读性和可维护性,特别是当你需要为多种类型的元素应用相同的样式时。
  • :is 伪类不会创建新的元素或改变文档结构,它仅仅是一个选择器,用于匹配元素。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

选择器
:invalid 10.0 10.0 4.0 5.0 10.0

CSS 语法

:is(selector1, selector2, ..., selectorN) {
    /* 样式规则 */
}
  • selector1, selector2, ..., selectorN:这是一系列选择器,可以是元素类型、类选择器、属性选择器、伪类等。

 完整CSS选择器参考手册 完整CSS选择器参考手册