【CSS】是时候使用 :is() 减少你的代码了

GopalFeng

发布于 2022-08-01 19:50:49

5850

is() 是什么？

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-10-05，如有侵权请联系 cloudcommunity@tencent.com 删除

css

https

网络安全

本文分享自前端杂货铺微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

https

网络安全

登录后参与评论

0 条评论

热度