全国服务热线:4008-888-888

技术知识

浅谈CSS :is() 和 :where() ●▂●将要出現在访问器中

如今,Safari(技术性浏览版106)和Firefox(版本号78)的浏览版均适用新的CSS :is():where() 伪类。Chrome的执行依然落伍。

应用 :is() 降低反复

你可以令其用 :is() 伪类来删掉挑选器目录中的反复项。

/* before */
.embed .save-button:hover,
.attachment .save-button:hover {
  opacity: 1;
}

/* after */
:is(.embed, .attachment) .save-button:hover {
  opacity: 1;
}

此作用关键在未解决的规范CSS编码中有效。假如应用Sass或相近的CSS预解决程序,则将会更喜爱嵌套循环。

留意:访问器还适用非标准准的 :-webkit-any():-moz-any() 伪类,他们与 :is() 类似,但限定大量。WebKit在2016年停止使用了 :-webkit-any() ,Mozilla已经将Firefox的客户代理商款式表升级为应用 :is() 而并不是 :-moz-any()

应用 :where() 来维持低独特性

:where() 伪类与 :is() 具备同样的英语的语法和作用。他们中间的唯一差别是 :where() 不容易提升总体挑选器的独特性(即某条CSS标准独特性越高,它的款式越优先选择被选用)。

:where() 伪类以及一切主要参数也不对挑选器的独特性有一定的协助,它的独特性自始至终为零。

此作用针对应便于遮盖的款式很有效。比如,基本款式表 sanitize.css 包括下列款式标准,假如缺乏 <svg fill> 特性,该标准将设定默认设置的添充色调:

svg:not([fill]) {
  fill: currentColor;
}

因为其较高的独特性(B = 1,C = 1),网站没法应用单独类挑选器(B = 1)遮盖此申明,而且迫不得已加上 !important 或人为因素地提升挑选器的独特性(比如 .share- icon.share-icon )。

.share-icon {
  fill: blue; /* 因为独特性较低,因而不适感用 */
}

CSS库和基本款式表能够根据用 :where() 包裝他们的特性挑选器来防止这一难题,以维持全部挑选器的低独特性(C=1)。

/* sanitize.css */
svg:where(:not([fill])) {
  fill: currentColor;
}

/* author stylesheet */
.share-icon {
  fill: blue; /* 因为独特性较高,可用 */
}

小结

到此这篇有关CSS :is() 和 :where() 将要出現在访问器中的文章内容就详细介绍到这了,大量有关CSS :is() 和 :where() 访问器內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服