快来使用 CSS 的 :is() 减少你的代码吧

deis()  么？

is() 是一个 CSS 伪类函数，该函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。举个例子就比较清晰的理解：

使用前：

ul li,
ol li {}

使用后：

:is(ul, ol) li {}

优化我们的代码

假如我们系统比较复杂，is() 可以帮助我们简化代码，比如如下代码：

/* 3-deep (or more) unordered lists use a square */
ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

简化成：

/* 3-deep (or more) unordered lists use a square */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
  list-style-type: square;
}

避免 CSS 错误

假如我们的 CSS 中有错误，将导致整个选择器不生效。比如下面的 .content 写成 :content。demo 地址^[1]

<div class="container-1">
  <p class="title">I am Gopal</p>
  <div class="content">我是锅巴</div>
</div>

<div class="container-2">
  <p class="title">I am Gopal</p>
  <div class="content">我是锅巴</div>
</div>

/* 写错，将导致都不生效 */
.container-1 .title, .container-1 :content {
  color: #885c5c;
}

但假如使用 :is()，.title 选择器依然可以生效，如下：

/* content 写错，title 还可以生效 */
.container-2 :is(.title, :content) {
  color: #885c5c;
}

is() VS CSS 预处理器

is() 和 CSS 预处理器中的嵌套规则很相像，如下所示：

div, p, ul, ol {
  span {
    /* ... */
  }
}

/* 最终解析成 */
div span, p span, ul span, ol span {
  /* ...*/
}

以下是 :is() 的实现

:is(div, p, ul, ol) span {
}

但需要注意的是它们的优先级是不一样的。

优先级

通过 :is() 匹配到元素的优先级，会采用 :is() 选择器列表参数中优先级最高的计算（即使它不存在）。

理解起来有点拗口，直接看一个 demo 地址^[2]

<ul class="container-3">
  <li class="title">I am Gopal</li>
  <li class="content">我是锅巴</li>
</ul>

/* 计算的时候，取 .list，而不是 ul。其优先级为 0 1 1 */
:is(ol, .list, ul) li {
  color: #885c5c;
}
/* 优先级为 0 0 2 */
ul li {
  color: #000;
}

在使用 :is() 的时候，它的参数为 ol, .list, ul，取最高的 .list 计算，其优先级为 0 1 1。而 ul li 的优先级是 0 0 2。所以会是 :is() 选择器生效，即使后者写在后面，这个跟预选择器是有区别的，使用预选择器会被后面的覆盖。

兼容性

:is() 兼容性，IE 还是全军覆没，但很多场景可以用起来了。详情^[3]

参考

• :is^[4]
• MDN^[5]

参考资料

[1]

demo 地址: https://codepen.io/gpingfeng/pen/mdwLdbG

[2]

demo 地址: https://codepen.io/gpingfeng/pen/zYzjYeW

[3]

详情: https://caniuse.com/?search=%3Ais

[4]

:is: https://css-tricks.com/almanac/selectors/i/is/

[5]

MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/:is#issues_with_performance_and_specificity

- EOF -

推荐阅读  点击标题可跳转

觉得本文对你有帮助？请分享给更多人

推荐关注「前端大全」，提升前端技能

点赞和在看就是最大的支持❤️