:is() - 告别讨厌的选择器重复

这篇文章发布于

DeathGhost 编辑, 归类于css » 当前评论0条。

编写CSS时大部分人喜欢借用SCSS或LESS工具,想必大家也能体会到它的便捷性;同时也能感受到原始CSS编写时的麻烦。下面看看使用:is() CSS 伪类函数如何优雅处理重复父选择器的问题。

平时用SCSS或LESS编写样式时,最喜欢的就它的嵌套写法,不用重复父级选择的输入;原始CSS写法,我们在定义子项样式或其他元素子项样式一致时会以选择器及其,号连接进行样式设置,2-3层级都觉得麻烦,何况更深一层,每次定义下级选择器样式都得复制其父级。

:is() - 告别讨厌的选择器重复 - DeathGhost
:is() - 告别讨厌的选择器重复

例如:将header中的h1元素与section中的h2元素文字颜色设为橘红色

CSS中原始写法将会是这样

header h1,
section h2{
    color: orangered;
}
<header>
    <h1>DeathGhost</h1>
</header>
<section>
    <h2>新码笔记</h2>
    <p>告别讨厌的选择器重复...</p>
</section>

示例仅简单演示,实际项目应用中可能更多,样式那么编写就比较麻烦,维护也不方便,最终文件也比较臃肿。

:is() CSS 伪类处理方法

:is(header, section) :is(h1, h2) {
    color: orangered;
}

这样编写瞬间轻松了很多。

现在Web前端开发中,如果不是组件化处理,一般会预定义一些样式类待引用;还有就是引入第三方UI框架的也很少自行编写样式。

拿来吧你! - 有时候我们也会错过很多。

所以,这里分享下此方法,望悉知,实际项目开发中或多或少也会使用到。


CSS :is() CSS 伪类 选择器 :match()