CSS整洁之道——:is()、:where()和:has()的用法

让我们写出优雅界面的CSS，它也总是把自己进化得更加优雅。

今天我们花5分钟时间学习三个优雅的CSS伪类：:is()、:where() 和 :has()。

:is() - 取代组合选择器

:is() 允许你在一个规则中包含多个选择器。它接受一组选择器作为参数，并应用样式到匹配的元素上。

/* 传统方法 */
ul > li > a, 
ol > li > a, 
nav > ul > li > a, 
nav > ol > li > a { 
  color: blue; 
}

/* 使用 :is() */
:is(ul, ol, nav > ul, nav > ol) > li > a { 
  color: blue; 
}

:is() 可以简化多层嵌套和多种选择器组合的写法，让你维护样式更方便。

:is() 优先级依然遵循CSS选择器的优先级规则，即 ID -> 类 -> 元素 的顺序。

:is(.class1) a {
  color: blue;
}

:is(#id1) a {
  color: red;
}

这段代码里两条规则如果命中相同的元素，那么第二条会优先应用。

:is() 的参数也可以传一个匹配规则

:is([class^="is-styling"]) a {
  color: yellow;
}

这样的写法会匹配所有 class 开头是 is-styling 的选择器。

:where() - 拥有最低优先级

:where() 和 :is() 相似，都可以传入选择器或者匹配规则来简化你的CSS代码。

:where([class^="where-styling"]) a {
  color: yellow;
}

但和 :is() 不同的是，:where() 拥有最低优先级，这样的好处是它定义的样式规则不会影响其他样式规则，避免了样式冲突。

/* <footer class="where-styling">……</footer> */

footer a {
  color: green;
}

:where([class^="where-styling"]) a {
  color: red
}

当有其他规则和 :where() 同时被命中时，:where() 一定是失效的。所以上面这个例子实际效果是链接显示绿色。

:has() - 基于其他元素进行匹配

:has() 可以根据直接后代元素的存在来匹配元素

/* 选择直接包含 p 元素的 div */
div:has(> p) {
  border: 1px solid black;
}

也可以根据紧邻的下一个兄弟元素来匹配元素

/* 选择后面跟着 p 元素的 div */
div:has(+ p) {
  border: 1px solid black;
}

你还可以把它跟其他伪类一起使用，比如 :has() 和 :is() 一起使用

:is(h1, h2, h3):has(+ :is(h2, h3, h4)) {
  margin: 0 0 0.25rem 0;
}

:is(h1, h2, h3):has(+ h2, + h3, + h4) {
  margin: 0 0 0.25rem 0;
}

:has() 使用场景很多，只要是强互动的页面都可能用到，以后有机会单独分享一篇～

总结

大部分浏览器的新版本都已支持 :is()、 :where() 和 :has() 这三个伪类了，如果你的项目跑在低版本的浏览器中，那么需要考虑一下回退策略。