新的 CSS 伪类函数 :is() 和 :where()
在编写 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()
由 :match()
改名而来,部分浏览器有其私有的 :any()
实现 :is()
的部分功能,在使用 :is()
之前,我们应该先了解其兼容性:
:is() 和 :where()
:is()
作为一个伪类函数,其接收选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素,:where()
伪类函数与其功能相同,仅仅选择器权重不同,下面是几个例子:
/* 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():
作者:link
文章来源:JavaScript 公众号
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 新的 CSS 伪类函数 :is() 和 :where()
码云笔记 » 新的 CSS 伪类函数 :is() 和 :where()