伪类、伪元素
Youky ... 2023-5-9 Less than 1 minute
# 伪类、伪元素
# 伪类选择器
用于选择处于特定状态的元素，表现的就像是给某些元素添加了 class 一样
特点：以冒号:开头
常见伪类：
:hover：鼠标悬停:focus：元素激活:first-child：第一个子元素:invalid：内容未经验证的表单元素:link、:active、:visited等用于 a 标签的不同状态
# 伪元素选择器
表现类似是在 HTML 中添加了一些标签
特点：以双冒号::开头
常见伪元素：
::first-line：第一行::before：在前面插入一些内容::after：在后面插入一些内容
/* 在末尾添加内容 */
.title::after {
content: "。";
}
/* 在开头添加内容 */
.title::before {
content: " ";
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 二者的区别
- 表示方法的不同：一个用冒号，一个用双冒号
- 定义不同：伪类操作的是文档中已有的元素；伪元素创建一个文档中没有的元素