伪类种类
| 伪类 |
作用 |
| :active |
将样式添加到被激活的元素 |
| :focus |
将样式添加到被选中的元素 |
| :link |
将样式添加到未被访问过的的链接 |
| :visited |
将样式添加到被访问过的链接 |
| :lang |
规定元素中使用的语言 |
| :hover |
当鼠标悬浮在元素上方时，向元素添加样式 |
| :first-child |
将样式添加到第一个元素 |
伪元素种类
| 伪元素 |
作用 |
| :first-letter |
将样式添加到文本的首字母 |
| :first-line |
将样式添加到文本的首行 |
| :before |
在某元素之前插入内容 |
| :after |
在某元素之后插入内容 |
区别
- 伪类的效果是通过给要加特殊样式的元素，增加一个类来完成实现的；伪元素的效果是通过给要加特殊样式的内容加一个元素来实现的
- 伪类，首先是类的一种，作用域标签本身（状态）；伪元素，首先是元素，作用于内容本身
这里用伪类 :first-child 和伪元素 :first-letter 来举例说明。
1
2
3
4
5
6
7
8
9
10
11
| p > i:first-child {color: red}
<p>
<i>first</i>
<i>second</i>
</p>
// 等价于
.first-child {color: red}
<p>
<i class="first-child">first</i>
<i>second</i>
</p>
|
1
2
3
4
5
| p:first-letter {color: red}
<p>I am stephen lee.</p>
// 等价于
.first-letter {color: red}
<p><span class='first-letter'>I</span> am stephen lee.</p>
|
从例子中可以看到，伪类的效果只需要通过添加一个类名就可以达到，而伪元素的效果需要先添加一个实际的元素再添加一个类名来达到。也就是说，** 伪元素需要额外创建一个元素，而伪类不需要 **。
CSS3规范
伪元素和伪类容易混淆，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
1
2
| :Pseudo-classes // 伪类
::Pseudo-elements // 伪元素
|
但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。