- 原文地址：Reduce CSS Code with the :is Selector
- 原文作者：Bill Chen
- 译文出自：掘金翻译计划
- 本文永久链接：使用:is选择器精简你的CSS代码
- 译者：前端picker
- 校对者：无（欢迎大家提意见，喷我都行）
介绍
在编写CSS时，很多时候当我们想要给同一个父级元素下的子元素添加相同的属性时，我们会使用复合选择器，如下图所示。
.container .title,
.container .detail {
颜色：黑色；
}
复合选择器允许我们同时给多个元素设置相同的CSS属性。但是，如果子元素一旦变多，我们就必须重复编写父类。:is 选择器可以用来解决父元素重复编写的问题。
举例
给定下面的HTML代码。
<div class="card --card1">
<h2 class="title">Normal CSS</h2>
<p class="detail">
.--card1 .title,
.--card1 .detail {
color: brown;
}
</p>
</div>
假设我们想要给h2标题和detail元素都设置棕色。通常的做法如下：
/* Normal CSS */
.--card1 .title,
.--card1 .detail {
color: brown;
}
呈现的效果如下：
尽管上面的CSS代码起到了作用，但是父元素我们编写了两遍，产生了冗余。我们来看看:is选择器的效果：
/* : 是选择器 */
.--card2 :is(.title, .detail) {
颜色：棕色；
}
:is选择器实现了与重复选择器一样的效果，代码也更精简。
CSS常见问题
无论是CSS还是SCSS,一个常见的问题：当代码中出现错误时，CSS选择器无法实现预期的效果。
假设有一个拼写错误：.detail被错误的编写为:detail
/* Normal CSS with errors */
.--card3 .title,
.--card3 :detail {
color: brown;
}
效果如下：
从图中我们可以看到，不仅detail元素没显示预期的效果，title元素也无法正确的显示设定的颜色值。这是因为，浏览器将整块代码一起解析，当出现一个错误的代码时，整个选择器失效。
当 :is 选择器发生类似情况时，会出现不同的结果。
/* :is selector with errors */
.--card4 :is(.title, :detail) {
color: brown;
}
如图所示，即使我们在尝试编写 detail 元素时出现错字，title 元素仍然可以按预期显示颜色。
本教程的源代码可以在 CodePen 上找到：
