css 小师系列：一种新的影响样式优先级的方式😍

相信各位一定遇到过被样式优先级折磨的困扰，那么各位平时都是怎么处理的呢？

!important?

不够优雅！

添加选择器增加权重？

过于繁琐！

那么，在技术飞速发展的现在，有没有什么方式，可以既简单又优雅的解决这个问题呢？

有的，兄弟，有的，今天它来了！

不要998，不要98，有用的知识抱回家！

现在，here we go！

:where()? :is()?

在解决问题之前，先来了解相关知识，这两个伪类选择器是什么，又有什么用呢？

话不多说，直接贴mdn!😂

首先是:where()

emmmm,有点云里雾里的🤨，让我用简单来翻译下（汉译汉😅）

简单来说，:where() 伪类选择器，用于将选择器进行分组，并将它们作为一个整体来进行选择，以简化和优化选择器的编写（类似于逻辑||）

如何使用呢？

见下列代码：

css 复制代码

p:where(.name,:focus){
    color:red
}

.dark--theme :where(button, a) {
  color: reb;
}

相当于

css 复制代码

p.name,p:focus{
  color:red
}

.dark--theme button,.dark--theme a{
  color: reb;
}

:is() 选择器用法和功能和 :where() 一致，区别在于两者之间的区别在于，:is() 会计入整个选择器的优先级（它采用其最具体参数的优先级），而 :where() 的优先级为 0。

下面是使用时要注意的地方。

重点就在于这句话：:is() 会计入整个选择器的优先级（它采用其最具体参数的优先级），而 :where() 的优先级为 0。

首先 :where() 的优先级为零，这个特性使得它在设计框架、主题等场景时非常有用，因为很容易被覆盖。

那么:is()呢？计入整个选择器的优先级（它采用其最具体参数的优先级）意味着它的优先级是如何的呢？

来看下面这个场景：

css 复制代码

button:is(.btn){
  background:blue;
}

#btn.btn{
  background:red
}

按钮颜色如下：

这个时候怎么让有:is()伪类选择器的样式生效呢？很简单，可以往里添加几个不存在的选择器来提高其优先级，比如

css 复制代码

button:is(.btn,#increase#increase){
  background:blue;
}

这个时候按钮就会变成蓝色的了，如下图：

因此，显而易见，:is()选择器优先级是按照其分组内最高的优先级。即使那个选择器并不存在。

知道了这个，再解释下上面的示例，看下面这个优先级表格，就可以很简单的判断那个优先级更高了。

选择器	优先级
#btn.btn
button:is(.btn)
button:is(.btn,#increase#increase)

感兴趣的也可以在这个权重测试网站自己多写几个尝试下.

因此，:is()选择器可以很方便的在不选择任何元素的情况下增加选择器权重（也就是说，不需要改变html就可以增加权重了！😎）

怎么样，是不是不用再被这恼人的优先级困扰了？

虽然，这两个选择器在兼容性方面还有着一定局限性，不过，相信随着之后技术迭代，这两个选择器也会成为大家常用熟知的工具！😊

感谢大家阅读，有问题可以随时在评论区提出，欢迎大家积极讨论！

（ps:都看到这了，点个赞👍再走呗,谢谢大家！😘）