使用:is()和:where()简化复杂选择器写法 - 智猿学院-IT界的百科全书

CSS选择器，咱也来玩点“花活”： `:is()` 和 `:where()` 的妙用

各位看官，咱今儿个不聊啥高深莫测的框架，也不侃啥前沿的架构，就来聊聊CSS里两个挺有意思的小东西：:is() 和 :where()。别看它们名字平平无奇，用好了，能让你的CSS代码瞬间变得清爽、易懂，还能避免一些“手抖”带来的错误。

咱们先来个场景：你负责一个网站的样式，里面有个模块，需要给所有标题（h1到h6）加上一个统一的样式，比如都变成蓝色。

如果你是个“老实人”，可能会这么写：

h1 {
  color: blue;
}

h2 {
  color: blue;
}

h3 {
  color: blue;
}

h4 {
  color: blue;
}

h5 {
  color: blue;
}

h6 {
  color: blue;
}

这代码，看起来没啥毛病，就是有点…嗯…笨。而且，万一哪天产品经理突然发神经，说“h4的颜色要改成绿色！”，你就得赶紧去把这一行单独改掉。这种重复性的劳动，简直是对程序员生命力的慢性消耗啊！

这时候，:is() 就该闪亮登场了！它可以把上面这坨代码简化成这样：

:is(h1, h2, h3, h4, h5, h6) {
  color: blue;
}

是不是感觉世界都清净了？ :is() 就像一个“选择器容器”，把所有你想选的元素类型都放进去，然后统一应用样式。以后再想改颜色，直接改这一行就OK了，效率杠杠的！

:is() 的工作原理，其实很简单：

它接受一个选择器列表作为参数，只要元素符合列表中的任何一个选择器，就会被选中。就像是你在跟CSS说：“嘿，哥们儿，你帮我看看，谁是 h1，谁是 h2… 只要是这些家伙，都给他们染成蓝色！”

:is() 的更多妙用：

处理复杂的嵌套结构： 假设你的网站有个导航栏，里面的链接可能是直接放在 ul 里，也可能放在 li 里，为了保证样式统一，你可以这么写：
```
nav :is(ul, li) a {
  text-decoration: none; /* 去掉下划线 */
  color: #333; /* 默认颜色 */
}

nav li a:hover {
  color: red; /* 鼠标悬停时的颜色 */
}
```
这样，无论链接是怎么嵌套的，都能保证样式一致。 :is() 在这里就像一个“万能钥匙”，帮你打开各种嵌套结构的大门。
针对不同状态应用样式： 比如，你想给所有 input 元素，以及 button 元素，在获得焦点时添加一个阴影效果：
```
:is(input, button):focus {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
```
这样，无论用户点击哪个输入框或者按钮，都会有阴影提示，用户体验瞬间提升一个档次！
让代码更具可读性： :is() 可以把一些复杂的选择器逻辑变得更清晰，更容易理解。比如，你想给所有 .article 里面的段落，以及 .sidebar 里面的段落，设置不同的字体大小：
```
:is(.article, .sidebar) p {
  font-size: 16px;
}

.article p {
  font-size: 18px; /* article里面的段落更大一点 */
}
```
这样写，虽然稍微多了一行代码，但是逻辑更清晰，更容易维护。

说完 :is()，咱们再来看看 :where()。

:where() 听起来和 :is() 很像，但其实它们之间有一个非常重要的区别：:where() 永远不会增加选择器的优先级！

啥意思呢？咱们来个例子：

<div class="container">
  <p class="text">Hello, world!</p>
</div>

.container p {
  color: green;
}

:is(.container, .text) {
  color: red;
}

.text {
  color: blue;
}

你猜猜这段代码里，文字最终会显示成什么颜色？

答案是：红色。

因为 :is() 会增加选择器的优先级。 .container p 的优先级是 0-1-2 (0个id，1个class，2个元素选择器)，而 :is(.container, .text) 的优先级是 0-1-0 (0个id，1个class，0个元素选择器)。由于 .container p 优先级更高，所以文字最终显示为绿色。但是 :is(.container, .text) 也会应用样式，所以文字会显示红色。

如果我们把 :is() 换成 :where()：

.container p {
  color: green;
}

:where(.container, .text) {
  color: red;
}

.text {
  color: blue;
}

这时候，文字的颜色就变成了蓝色。

因为 :where() 不会增加选择器的优先级，所以 .container p 和 .text 的优先级都比 :where() 高，最终 .text 的样式会覆盖 :where() 的样式。

:where() 的妙用：

统一重置样式： 有时候，我们需要对一些元素进行统一的样式重置，比如去掉 margin 和 padding。如果使用 :is()，可能会因为优先级问题导致重置失败。这时候，:where() 就派上用场了：
```
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, li) {
  margin: 0;
  padding: 0;
}
```
这样，无论这些元素之前有什么样式，都会被强制重置，而且不会影响其他样式的优先级。
编写通用的主题样式： 你可以使用 :where() 来编写一些通用的主题样式，比如定义一些颜色变量，或者设置一些通用的字体样式。这些样式不会影响其他组件的样式，可以很方便地进行主题切换。
```
:where(:root) {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-family: sans-serif;
}

body {
  font-family: var(--font-family);
  color: var(--primary-color);
}
```
这样，你就可以在 :root 里面定义一些全局变量，然后在其他地方使用这些变量。如果需要切换主题，只需要修改 :root 里面的变量就可以了，非常方便。

总结一下：

:is() 是一个“选择器容器”，用于简化复杂的选择器，提高代码可读性。它会增加选择器的优先级。
:where() 和 :is() 类似，但它不会增加选择器的优先级，适用于样式重置和通用主题样式的编写。

使用建议：

如果只是想简化选择器，提高代码可读性，可以使用 :is()。
如果需要进行样式重置，或者编写通用的主题样式，可以使用 :where()。
在复杂的场景下，需要仔细考虑选择器的优先级问题，避免出现样式覆盖的情况。

总而言之，:is() 和 :where() 都是CSS里非常实用的小工具。它们可以帮助你写出更简洁、更易维护的CSS代码，让你在前端开发的道路上越走越顺畅！下次写CSS的时候，不妨试试它们，相信你会爱上它们带来的便利！

CSS选择器，咱也来玩点“花活”： :is() 和 :where() 的妙用

发表回复 取消回复

CSS选择器，咱也来玩点“花活”： `:is()` 和 `:where()` 的妙用

发表回复取消回复