:is() - 告别讨厌的选择器重复
这篇文章发布于
由 DeathGhost 编辑， 归类于 css » 当前评论 0 条。
编写CSS时大部分人喜欢借用SCSS或LESS工具，想必大家也能体会到它的便捷性；同时也能感受到原始CSS编写时的麻烦。下面看看使用:is() CSS 伪类函数如何优雅处理重复父选择器的问题。
平时用SCSS或LESS编写样式时，最喜欢的就它的嵌套写法，不用重复父级选择的输入；原始CSS写法，我们在定义子项样式或其他元素子项样式一致时会以选择器及其,号连接进行样式设置，2-3层级都觉得麻烦，何况更深一层，每次定义下级选择器样式都得复制其父级。
例如：将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框架的也很少自行编写样式。
拿来吧你！ - 有时候我们也会错过很多。
所以，这里分享下此方法，望悉知，实际项目开发中或多或少也会使用到。
