CSS:这几个伪类,你用了吗

开发 前端
root 伪类的使用场景,我们引入某些 UI 库,很多时候,需要重置一些样式,就可以使用 root 伪类,这样就不担心重置的样式不生效了。因为伪类 root 的优先级更高。

## :root 伪类

:root 伪类是匹配文档的根元素,很多时候,根元素也就是 html 元素,用 root 伪类来匹配根元素,目的就是解决根元素不是 html 的场景,比如根元素是 svg 的时候。

root 伪类的使用场景,我们引入某些 UI 库,很多时候,需要重置一些样式,就可以使用 root 伪类,这样就不担心重置的样式不生效了。因为伪类 root 的优先级更高。比如:

```css
:root {
    overflow-y: auto;
    scrollbar-gutter: stable;
}
```

另一种情况就是在 root 伪类内定义变量,比如:

```css
:root {
   /* 颜色变量 */
   --blue: #248600;
   --red: #f461cc;
   /* 尺寸变量 */
   --layerWidth: 1100px;
}
```

因为在伪类 root 中定义变量,代码的可读性更好,所以有很多团队都推荐伪类 root 负责定义变量,html 负责样式。至于哪种方式好点,就得看看团队的编码规范了。

## :empty 伪类

:empty 伪类用来匹配空标签。

但是这里的空标签,标签内不能有注释、换行,否则不生效。

##  :first-child伪类和:last-child伪类

first-child 伪类,匹配的是第一个元素,last-child 匹配最后一个元素。

## :only-child伪类

:only-child伪类,顾名思义,就是匹配没有兄弟元素的元素。

##  :nth-child()伪类和:nth-last-child()伪类

匹配指定序号的元素。它们有两种参数类型:

第一种是:关键字的形式

1. odd:匹配第奇数个元素,如第1个元素、第3个元素、第5个元素

2. even:匹配第偶数个元素;

第二种是:函数符号的形式

1. An+B:其中A和B都是固定的数值

## :first-of-type伪类和:last-of-type伪类

:first-of-type表示当前第一个标签类型的元素,:last-of-type伪类的语法和匹配规则与:first-of-type的类似

责任编辑:武晓燕 来源: 读心悦
相关推荐

2024-07-01 08:31:14

Spring工具类代码

2021-06-11 13:59:22

CSS原子类

2020-10-25 08:45:38

IPv6网络协议网络

2022-05-16 08:09:45

前端API

2022-05-31 09:42:49

工具编辑器

2021-03-05 18:38:45

ESvue项目

2014-02-17 10:54:13

PostgreSQL数据库

2023-11-08 08:43:08

calc函数CSS

2020-08-18 08:08:59

CSS伪元素伪类

2023-07-28 09:50:54

Hutool工具Java

2010-09-06 11:26:18

CSS伪类

2010-09-07 10:57:34

CSS伪类

2010-09-03 11:24:49

CSS伪类

2023-04-10 15:01:38

CSS开发

2021-04-14 20:36:57

CSS伪类函数

2021-04-20 09:44:42

CSS函数选择器

2017-09-23 15:17:21

散热笔记本电脑蓝屏

2022-07-08 09:27:48

CSSIFC模型

2018-04-23 10:05:41

Java Web框架Spring

2016-08-25 21:41:29

MarkdownHtmlWeb
点赞
收藏

51CTO技术栈公众号