看了上面的举例1，我估计有些新手就要开始这样写了：直接给p标签添加新的式样。

:is(.textColor) {    color:red;

}.pColor{   color: black;
}
p4

但是:is是支持特定元素的写法的:你只需要在:is 前面添加

div:is(.textColor) {
    color:red;
}

多个:is

div:is(.textColor) :is(h2,h5){
  color:red;
}

  
h2
  
h3
  
h4
  
h5

权重

:is 的权重是由提供的id，元素等选择器决定的；可能比较难理解。一个例子马上明白。

    
li1
    
li2

我们来更改li的字体颜色。

:is(ol) li {
  color: red;
}
ol li {
  color: blue;
}

大家可以猜一下是什么颜色。

是蓝色：为啥呢，首先is的参数是ol与下面的那个ol选择器的权重一致。并且由于blue是在下面的，浏览器自动使用blue覆盖掉了red。

再看下面的写法，我们给is的参数加了一个id: #olID,最终的颜色就是红色。这就是因为is使用了权重更高的id选择器。

 :is(ol,#olID) li {
        color: red;
      }
      ol li {
        color: blue;
      }

:where

:where和:is的语法参数完全一致。唯一不同的就是:where的权重永远为0,或者说是最卑微的。 还是上面那个例子。

  
li1
  
li2

这里我们：

:where(ol,#olID) li {
  color: red;
}
ol li {
  color: blue;
}

最后的结果是蓝色

应用场景

因为要说了，既然有了is为啥还要:where?个人觉得，:where还是很有用的。比如说在开发组件库的时候，可以使用，因为where的权重很低，那么使用者是不是很容易覆盖了，就不需要什么!imprtant，v-deep之类的了。

关于CSS中的 :is() 和 :where()怎么用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。