css伪类函数 :is() 和 :where()

这两天在做一个需求，要通过引入css文件对现有表单样式做一些自定义修改，发现原有二开css样式文件里有大量类似的样式分组出现：

尽管已经使用了并集选择器进行了分组，但这些看起来依然是太可怕了！难道没有更简洁优雅的书写方式了吗？

于是，打开万能的mdn，翻到css，选择器，选择器列表的时候，发现了意外收获：developer.mozilla.org/zh-CN/docs/…

没错就是:is()和:where()

developer.mozilla.org/zh-CN/docs/…

developer.mozilla.org/zh-CN/docs/…

使用方法的话用代码简单描述做个对比，

使用前：

/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
section h1, article h1, aside h1, nav h1 {
  font-size: 25px;
}
/* Level 2 */
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1, {
  font-size: 20px;
}
/* Level 3 */
/* ... don't even think about it! */

复制代码

使用后：

/* Level 0 */
h1 {
  font-size: 30px;
}
/* Level 1 */
:is(section, article, aside, nav) h1 {
  font-size: 25px;
}
/* Level 2 */
:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
  font-size: 20px;
}
/* Level 3 */
:is(section, article, aside, nav)
:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
  font-size: 15px;
}


复制代码

效果拔群！

但是，不出意外的话，意外就要出现了。

需要注意的有两点：

1. 兼容性问题

看着这些个三位数的android和14+的ios就知道现阶段移动端肯定是用不了。 pc端的话，由于electron的chromium内核较新，内部打开的pc应用可以使用（electron 12开始内核就是89了）。

2. 选择器优先级

:where() 和 :is() 的不同之处在于，:where() 的优先级总是为 0 ，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。

分组写的脑壳疼的朋友们可以按需使用。