在最新的CSS中新增了4个CSS伪类限制器，分别是 :is(),:where(),:has() 和 :not()。接下来我们就来讲解一下他们是如何使用吧，但是因为是新增的选择器，所以我们在使用前最好先在caniuse.com/ 先查询一下，浏览器的是否支持，防止后续我们的代码在浏览器上出现未知的bug。

:is()

我们在编写代码时，经常会遇见要给多个元素添加同样的CSS样式的问题。最常见的做法就是用,号分割多个类名

HTML

<div class="parent">
<p class="element1">Element 1</p>
<p class="element2">Element 2</p>
<p class="element3">Element 3</p>
<p class="element4">Element 4</p>
</div>

CSS

.element1,.element2,.element3,.element4{
color:red;
}

这样链式写法的缺点是，当我们要添加元素数量很多时，他会显的很长，很臃肿。代码的可读性不高，不利于维护。这时我们就可以使用:is的写法。

:is(.element1,.element2,.element3,.element4){
color:red;
}

//如果我们的有父元素的话，可以这样写
.parent :is(.element1,.element2,.element3,.element4){
color:red;
}

注: 如果我们的:is()和父元素一起使用的话，一定要在:is()前加一个空格。

:where()

:where()选择器和:is()选择器的作用是一样的，但是is()选择器的优先级是根据他()里传入的参数的最高的优先级来决定的，而:where()的优先级始终是0

.parent :where(.element1,.element2,.element3,.element4){
  color:red
}

注: 如果我们的:where()和父元素一起使用的话，一定要在:where()前加一个空格。

:has()

:has的作用是，根据我们传入的class 、 Id 、 tagName来检查，对应的(class 、 Id 、 tagName)元素是否存在,如果存在进行匹配样式。

这里我们来做一个小案例，我们根据按钮是否被选中，来判断是否给p标签添加样式。

<div class="parent">
  <input type="checkbox" />
  <p>Child</p>
</div>

.parent:has([type="checkbox"]:checked) p{
  color:red
}

注: 我们的:has()不需要在前面加一个空格。

:not()

:not()是除了的意思，排除我们选择的标签，其他的都添加这个样式。

//在父元素的内部，它会给所有的p元素添加红色样式，除了父元素内的最后一个子元素或最后一个p元素
.parent :not(p:nth-last-child(1)){
  color:red;
}

写在最后

伙伴们，如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信：IsZhangjianhao，邀你进我的前端学习交流群，一起学习前端，成为更优秀的工程师～

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 29 天，点击查看活动详情

CSS新增了这些好用的伪类选择器你不会还不知道吧？

:is()

:where()

:has()

:not()

写在最后