:is()伪类选择器 :where()伪类选择器

2024-05-08 17:34:52

1.1 :is()伪类选择器

在日常写代码中，经常遇见重复的同一个元素在不同的标签中的情况，这样我们想要统一写一个这个元素的样式时就会比较麻烦，稍加不注意就会出现错误。例如:

li a,
artcile a,
section a {
color: #000000;
}
h1 a,
h2 a,
h3 a {
color: blue;
}

使用 CSS :is() 伪类选择器

CSS中的:is()伪类选择器可以解决这样的问题，并把最终的选择器视为匹配到的那一个。

:is(li, article, p) a {
color: #999999;
}

:is(h1, h2, h3) a {
color: green;
}

这样写不仅是简单了很多，实现的效果也是一样的。

同时，:is()也可以用在各种选择器的组合中，例如子节点选择器、邻居选择器等：

例如下面的子节点选择器：

:is(article, p) :is(h2, li) a {
color: #ff3344;}
展开就等于：

article h2 a,
article li a,
p h2 a,
p li a {
color: #ff3344;
}

与其它伪类选择器结合

:is()还可以与其他伪类选择器结合者使用，例如当一个文章所有的 h1-h6 标题，hover 的时候，在后面加上一个 "Hello Word"，如果使用传统的方式，我们会写成：

h1:hover::after,
h2:hover::after,
h3:hover::after,
h4:hover::after,
h5:hover::after,
h6:hover::after {
content: "Hello Word";
}

在使用:is()后可以写成：

:is(h1, h2, h3, h4, h5, h6):hover::after {
content: "Hello Word";
}

这样对比下来，：hover伪类选择器、::after伪元素都只需要写一次

几个重要的特性

:is() 伪类函数的列表值是宽松的：如果列表中的选择器是无效的，规则将继续匹配有效的选择器

:is() 选择器的权重是根据其列表来计算的

:is() 伪类函数的列表值中不能使用伪元素（至少到目前为止是这样）

:is() 伪函数的成组

兼容性

目前还是正在逐步规范化的新特性，:is() 伪类选择器的兼容性在目前主流的浏览器的版本都是兼容的。

1.2:where()伪类选择器

：where()的功能和用法和:is()完全一致。唯一的区别在于，:where()的优先级始终是0.

.btn span > a:hover,
#header span > a:hover,
h3#footer span > a :hover ,{
content: "Hello Word";
}

这样去写

:where(.btu,#header,#footer) span >a:hover{
content: "Hello Word";
}

:is()伪类选择器 :where()伪类选择器相关推荐

CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
css 选择器（标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器）
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类标签选择器类选择器层级选择器(后代选择器) id选择器组选择器伪类选择器通配符选择器标 ...
html5复合选择器,web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）...
参考文档:https://man.ilovefishc.com/css3/ 一.基本选择器: 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样 ...
css3学习之 css选择器(结构性伪类选择器)
同上篇:先说明下本机浏览器吧:opera 10 firefox 4.0 chrome 由于是公司机器xp的..所以ie版本为 ie8 另外有一个ietest 所谓伪元素选择器,是指并不是针对真正的元 ...
CSS3之伪元素选择器和伪类选择器
伪类选择器,和一般的DOM中的元素样式不一样,它并不改变任何DOM内容.只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见.伪类的效果可以通过添加一个实际的类来达到. ...
CSS之关系选择器、属性选择器、伪类选择器
一.关系选择器后代选择器:只要是这个元素的后代,样式都会发生变化,div下面的所有h1标签样式都会改变关系选择器:子代选择器,只改变子标签的样式 <!DOCTYPE html> < ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
css--css选择器，伪类
前戏前面我们说过CSS规则由选择器和声明组成,我们要给标签设置属性,那我们就要找到对应的标签,CSS选择器可以帮我们找到我们需要的标签 css选择器有: 标签选择器类选择器 ID选择器全局选择器 ...
CSS：基本概念、选择器、伪类伪元素
基本概念 HTML使用结构化标记的理由:易于建立内容索引.增加文档可用性.增加可访问性.易于维护. 元素(element):文档结构的基础,每个元素生成一个框(box)其中包含元素的内容, 元素的两 ...
CSS常用选择器、伪元素选择器、伪类选择器大全——响应式Web系列学习笔记
1. 常用的CSS选择器 CSS选择器的作用就是从HTML页面中找出特定的某类元素.常用的几类CSS选择器如下表所示. 选择器代码示例代码说明通用选择器 * *{} 选择所有元素. 标签选择器 ...

最新文章

热门文章