在CSS中，我们不得不说的就是伪类和伪元素，在不深入了解CSS的情况下，大多数的人都会将这两个混为一谈，趁今天有多余的空闲时间，我就来带大家总结一下关于伪类和伪元素的区别。
1. 伪类和伪元素的描述
CSS引入伪类和伪元素的概念是为了格式化文档树以外的信息。即伪类和伪元素是用来修饰不在文档树中的部分。举一些例子：列表中的第一个元素；一句话中的第一个字母。
在相关的书籍中对伪类和伪元素的描述如下所示：
伪类： 伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素：伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
2. 伪类和伪元素的定义
- 伪类：伪类前面是一个冒号。
| 属性 |
描述 |
| :active |
向被激活的元素添加样式 |
| :focus |
向拥有键盘输入焦点的元素添加样式 |
| :hover |
当鼠标悬浮在元素上方时，向元素添加样式 |
| :link |
向未被访问的链接添加样式 |
| :visited |
向已被访问的链接添加样式 |
| :first-child |
向元素的第一个子元素添加样式 |
| :lang |
向带有知道lang属性的元素添加样式 |
注意：在CSS定义中，同一个元素的:hover必须位于:link、:visited之后才能生效；:active必须位于:hover之后才能生效。
- 伪元素：伪元素前面是两个冒号，但是用一个冒号也是可以的，为了方便区分建议写成两个冒号，以养成良好的编码风格。
| 属性 |
描述 |
| ::first-line/:first-line |
匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在内联元素中。 |
| ::first-letter/:first-letter |
匹配元素中文本的首字母。被修饰的首字母不在文档树中 ，并且仅适用于在块级元素中 |
| ::before/:before |
在被选元素前插入内容 |
| ::after/:after |
在被选元素后插入内容，其用法和特性与:before相似 |
3. 伪类和伪元素使用的区别
下面我们就来使用伪类和伪元素来写一段带来看看它们的区别是什么。
我们使用伪类的:first-child来实现一个效果：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container>p:first-child{
color: greenyellow;
}
</style>
</head>
<body>
<div class="container">
<p>我是第一个p</p>
<p>我是第二个p</p>
</div>
</body>
</html>
|
得到的结果如下图所示：
此时我们可以看到伪类 :first-child 添加样式到第一个子元素上面了。
接下来我们使用伪元素的::first-letter来实现一个效果：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container>p::first-letter{
color: greenyellow;
}
</style>
</head>
<body>
<div class="container">
<p>我是第一个p</p>
<p>我是第二个p</p>
</div>
</body>
</html>
|
得到的结果如下图所示：
此时我们可以看到::first-letter伪元素添加样式到第一个文字上去了。
此时可以得到它们两个的区别了：
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。
