这些看似微不足道的 CSS 选择器语法添加内容将会带来巨大影响。
编写 CSS 时,您有时最终需要使用很长的选择器列表,从而以相同的样式规则定位多个元素。例如,如果要调整标题元素内找到的任何 <b>
标记的颜色,您可以编写以下代码:
h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
color: hotpink;
}
您可以改用 :is()
并提高易读性,同时避免使用长选择器:
:is(h1,h2,h3,h4,h5,h6) > b {
color: hotpink;
}
易读性和较短的选择器便利性只是 :is()
和 :where()
为 CSS 带来的价值的一部分。在这篇博文中,您将了解这两个功能伪选择器的语法和值。
浏览器兼容性
:is()
:where()
认识:is()
和:where()
这些是功能伪类选择器,请注意末尾的 ()
以及它们以 :
开头的方式。您可以将其视为与元素匹配的运行时动态函数调用。编写 CSS 时,您可以通过它们将选择器中间、开头或结尾的元素组合在一起。它们还可以改变特异性,使您能够抵消或提高特异性。
选择器分组
:is()
可用于分组的任何操作,:where()
也一样。这包括在选择器中的任何位置使用它们,以及嵌套和堆叠它们。您熟悉和喜爱的全方位 CSS 灵活性。以下是几个示例:
/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
color: hotpink;
}
/* in the middle */
article :is(header,footer) > p {
color: gray;
}
/* at the end */
.dark-theme :where(button,a) {
color: rebeccapurple;
}
/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
color: rebeccapurple;
}
/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
text-transform: uppercase;
}
/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
font-weight: 900;
}
上面的每个选择器示例都展示了这两个函数伪类的灵活性。如需查找可受益于 :is()
或 :where()
的代码区域,请查找包含多个逗号并且重复的选择器。
将简单和复杂的选择器与 :is()
搭配使用
如需复习一下选择器,请参阅“学习 CSS”中的选择器模块。下面通过几个简单和复杂的选择器示例来说明这一功能:
article > :is(p,blockquote) {
color: black;
}
:is(.dark-theme.hero > h1) {
font-weight: bold;
}
article:is(.dark-theme:not(main .hero)) {
font-size: 2rem;
}
到目前为止,:is()
和 :where()
在语法上可以互换。现在我们来看看它们有何不同。
:is()
和 :where()
之间的区别
在特异性方面,:is()
和 :where()
差异很大。如需回顾特异性,请参阅“学习 CSS”中的特异性模块。
简而言之
:where()
没有特异性。:where()
会压缩以函数参数形式传递的选择器列表中的所有特异性。这是其种类中的第一个选择器功能。:is()
采用其最具体的选择器的特异性。:is(a,div,#id)
的特异性得分为一个 ID,满分为 100 分。
当我对分组感到过于激动时,在列表中采用最高特异性选择器只是一个陷阱。我总是能够将高特异性选择器移至其自己的选择器中,从而避免这么多影响,从而提高易读性。以下是我的意思的示例:
article > :is(header, #nav) {
background: white;
}
/* better as */
article > header,
article > #nav {
background: white;
}
有了 :where()
,我就期待看到库提供没有明确的版本。作者样式和库样式之间的特异性竞争可能会结束。在编写 CSS 时,没有具体竞争条件。
CSS 已经在研究这样的分组功能很久了,现在它仍然是有待探索的领域。尽情享受制作更小的样式表和移除逗号的乐趣。
照片由 Markus Winkler 拍摄,选自 Unsplash 网站