CSS :where 和 :is 伪类函数是什么？

逃离我推掉我的手 2022-09-06 14:29 8阅读 0赞

什么是 :is 与 :where？

`:is()` 和 `:where()` 都是伪类函数，可以帮助缩短和停止创建选择器时的重复。它们都接受选择器的参数数组（id，类，标签等），并选择可以在该列表中选择的任何元素。

![202bb76de09d29f6d20e53c450046f20.gif][]

这对如何帮助我们编写更短的选择器可能没有多大意义，所以让我们尝试使用 `:where()` 和 `:is()` 。

## 如何使用 :is 与 :where？ ##

`:where()` 可以帮助我们解决类似这样的问题

.btn span > a:hover,
    #header span > a:hover,
    #footer span > a:hover { 
      ...
    }

变成这样的东西

:where(.btn, #header, #footer) span > a:hover { 
      ... 
    }

![0e44457653112048c74f1d756985b1d6.gif][]

和 `:is()` 可以帮助将相同的示例添加到该示例中

is(.btn, #header, #footer) span > a:hover { 
      ... 
    }

## :is 与 :where 和有什么不一样？ ##

`:where()` 和 `:is()` 看起来和功能都是一样的，但是它们之间有一个区别要记住，那就是它们有不同的特殊性。`:where()` 是简单的，其特异性总是为0，而 `:is()` 的特异性为最强的选择器。

## 什么是CSS特异性（简而言之）？ ##

在CSS中有四个层次的特异性层次。每一个级别或类别都有不同的分数，我们可以将所有的分数相加来计算选择器的特异性。

哪个选择器的数量最多，哪个元素的样式就会被应用到该元素上，这就是为什么有时当你写CSS时，你的样式不会被应用，会在开发工具中显示为划线。

**特异性等级评分**

*  ID——特异性得分为 `100`
 *  内联样式——特异性得分为 `1000`
 *  元素和伪类——特异性得分为 `1`
 *  类、伪类和属性——特异性得分为 `10`

例如

button.btn {
      color: red;
    }
    .btn {
      color: green;
    }

`.btn` = 10

`button.btn` = 1 + 10 = 11

如果我们把 `.btn` 类放在 `<button>` 标签上，文字就会变成红色，因为 `button.btn` 选择器的分数高于 `.btn` 选择器。

正如你所看到的，有两种不同的专属性级别的伪类，这是因为不同的伪类可能具有不同的专属性，这取决于你使用的伪类以及如何使用它们。

[202bb76de09d29f6d20e53c450046f20.gif]: /images/20220829/e0c5d3d2943844189e93c44c435ccfee.png
[0e44457653112048c74f1d756985b1d6.gif]: /images/20220829/9e7fb3212cd44db1bae4ad2453dec0ea.png

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是伪类选择器？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 伪类选择器 ⭐ 一些常见的伪类选择器示例： :hover :active

向右看齐/ 2023年10月14日 19:32/ 0 赞/ 59 阅读

相关伪类伪元素 css3_伪类| CSS

伪类伪元素 css3 These classes are basically used to add special effects to some selectors o

迈不过友情╰/ 2023年03月05日 10:59/ 0 赞/ 110 阅读

相关【CSS】CSS 伪类和伪元素

目录 1. 什么是伪类和伪元素？ 1.1 伪类 1.2 伪元素 2. 伪

红太狼/ 2023年02月15日 15:54/ 0 赞/ 115 阅读

相关 CSS的伪类和伪元素

定义伪类: CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

电玩女神/ 2023年01月08日 14:29/ 0 赞/ 214 阅读

相关 css 伪类、伪元素

一、伪类、伪元素的共同点 1. 伪类、伪元素存在的原因： css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比

青旅半醒/ 2022年12月18日 03:55/ 0 赞/ 237 阅读

相关 CSS伪类和伪元素

为什么要引入伪类与伪元素？ css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列

ゝ一世哀愁。/ 2022年12月06日 12:45/ 0 赞/ 298 阅读

相关 CSS中的伪元素和伪类

CSS伪类什么叫伪类呢？伪类是基于元素的特征而不是他们的id、class、属性或者内容。一般来说，元素的特征是不可以从DOM树上推断得到的，而且其是动态的，当用户和

逃离我推掉我的手/ 2022年11月07日 11:52/ 0 赞/ 267 阅读

相关 CSS :where 和 :is 伪类函数是什么？

什么是 :is 与 :where？ `:is()` 和 `:where()` 都是伪类函数，可以帮助缩短和停止创建选择器时的重复。它们都接受选择器的参数数组（id，类，

逃离我推掉我的手/ 2022年09月06日 14:29/ 0 赞/ 9 阅读

相关 css伪类和伪元素的区别

原文链接：[http://swordair.com/origin-and-difference-between-css-pseudo-classes-and-pseudo-el

女爷i/ 2022年07月30日 19:51/ 0 赞/ 330 阅读

相关 css中什么是伪类选择器？伪类选择器的简要介绍

伪类选择器（简称：伪类）通过冒号来定义，它定义了元素的状态，如点击按下，点击完成等，通过伪类可以为元素的状态修改样式。伪类的功能和一般的DOM中的元素样式相似，但和一...

你的名字/ 2021年01月29日 18:09/ 0 赞/ 966 阅读