CSS :is 选择器
定义和使用
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:这是一系列选择器,可以是元素类型、类选择器、属性选择器、伪类等。