相信各位一定遇到过被样式优先级折磨的困扰，那么各位平时都是怎么处理的呢？
!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() 是一个宽容型选择器（即无效的选择器会被忽略，会匹配剩下的）
- 这两个伪类不匹配伪元素 4.这两个伪类会增加理解成本，请确定使用他们会产生收益 5.要注意其兼容性，兼容性见下图
如何解决优先级问题？
重点就在于这句话：: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:都看到这了，点个赞👍再走呗,谢谢大家！😘）