一个主机可以建设多少个网站,山东高端网站建设,营销培训学院,搭建网站首页:is()
你是否曾经写过下方这样冗余的CSS选择器:
.active a,
.active button,
.active label {color: steelblue;
}其实上面这段代码可以这样写#xff1a;
.active :is(a, button, label) {color: steelblue;
}看~是不是简洁了很多#xff01;
是的#xff0c;你可以使用…:is()
你是否曾经写过下方这样冗余的CSS选择器:
.active a,
.active button,
.active label {color: steelblue;
}其实上面这段代码可以这样写
.active :is(a, button, label) {color: steelblue;
}看~是不是简洁了很多
是的你可以使用 :is() 对选择器的任何部分进行分组例如你可以对如下代码
.section h2,
.aside h2,
.nav h2 {color: steelblue;
}进行转换
: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()
: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() 块具有更高的权重。
:has()
一个相关但非常不同的伪类是:has()。:has() 允许选择包含匹配选择器(或选择器集)的子元素的父元素。
:has() 的一个示例是不显示下划线的情况下包含图像或视频的链接:
a { text-decoration: underline }/* 链接有下划线除非它们包含图像或视频 */
a:has(img, video) {text-decoration: none;
}现在如果默认情况下我们的 a 标记有下划线文本但其中有图像或视频则任何匹配的锚元素的下划线将被删除。
你也可以结合 :is() 使用 :is(a, button):has(img, video) {text-decoration: none;
}我们还需要预处理器吗?
现在你可能会说“SCSS可以做到这一点!你甚至可能更喜欢它的语法:
.active {button, label, a {color: steelblue;}
}说的没错这很优雅。但是CSS 似乎现在已经都能获取到我们曾经需要SCSS(或其他预处理器)才能获得的特性。
CSS 变量也是 CSS 本身的另一个不可思议的补充它回避了一个问题就是什么时候或者多久你真的需要预处理程序:
.active :is(a, button, label) {--color: steelblue;color: var(--steelblue);
}这并不是说预处理器没有它们的用例和优点。
但我认为在某个时间点上它们确实是处理任何重要CSS的强制要求而现在情况不再如此了。
最后一个惊喜
我想说的是CSS的未来仍然是光明的。CSS 工作组正积极致力于直接向CSS中添加嵌套选择器。他们正在积极地在3种可能的语法之间进行选择:
/* 1 */
article {font-family: avenir; aside {font-size: 1rem;}
}/* 2 */
article {font-family: avenir;
} {aside {font-size: 1rem;}
}/* 3 */
nest article { {font-family: avenir;}aside {font-size: 1rem;}
}你最喜欢哪一个?
其实第 1 种已经被官方采纳所以我们可能很快就会看到一个非常像 scss 的嵌套语法。
浏览器支持
目前所有主流浏览器都支持 :is() 和 :where() 伪类: 但是需要注意我们在这里提到的 :has() 伪类没有相同级别的支持所以使用 :has() 时要小心:
