概念上的区别
从概念上来区分，大致有以下几点：
伪类
伪类更多的定义的是状态。常见的伪类有: :hover，:active，:focus，:visited，:link，:not，:first-child，:last-child等等。
伪元素
伪元素是不存在于DOM树中的虚拟元素，它们可以像正常的html元素一样定义css，但无法使用JavaScript获取。常见伪元素有 ::before，::after，::first-letter，::first-line等等。
CSS3明确规定了：伪类用一个冒号(:)来表示，而伪元素则用两个冒号(::)来表示。但目前因为兼容性的问题，它们的写法可以是一致的，都用一个冒号(:)就可以了，所以非常容易混淆。
常见伪类
伪类包含两种：状态伪类和结构性伪类
状态伪类
状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。常见的状态伪类主要包括：
- :link 应用于未被访问过的链接；
- :hover 应用于鼠标悬停到的元素；
- :active 应用于被激活的元素；
- :visited 应用于被访问过的链接，与:link互斥。
- :focus 应用于拥有键盘输入焦点的元素。
结构性伪类(CSS3新增选择器)
结构性伪类是CSS3新增选择器，用于对dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。常见的包括：
- :root 选择文档的根元素，等同于html元素
- :empty 选择没有子元素的元素
- :target 选取当前活动的目标元素
- :not(selector) 选择除selector元素以外的元素
- :enabled 选择可用的表单元素
- :disabled 选择禁用的表单元素
- :checked 选择被选中的表单元素
- :nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n
- :nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数
- :nth-child(odd)
- :nth-child(even)
- :nth-child(3n+1)
- :first-child 选择某个元素的第一个子元素
- :last-child 选择某个元素的最后一个子元素
- :only-child
- :nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n
- :nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数
- :nth-of-type() 选择指定的元素；
- :nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
- :first-of-type 选择一个上级元素下的第一个同类子元素；
- :last-of-type 选择一个上级元素的最后一个同类子元素；
- :only-child 选择的元素是它的父元素的唯一一个子元素；
- :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
- :nth-of-type(odd)
- :nth-of-type(even)
- :nth-of-type(3n+1)
CSS3中的伪元素
伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。
- ::first-letter 选择元素文本的第一个字（母）
- ::first-line 选择元素文本的第一行
- ::before 在元素内容的最前面添加新内容
- ::after 在元素内容的最后面添加新内容
- ::first-letter 选中某个款级元素的第一行的第一个字母
- ::first-line 匹配某个块级元素的第一行
- ::selection 匹配用户划词时的高亮部分
伪元素的应用
清除浮动
.box::after {
content: '';
display: block;
clear: both;
}
1
2
3
4
5
2
3
4
5
画分割线
<style>
.spliter::before, .spliter::after {
content: '';
display: inline-block;
border-top: 1px solid #000;
width: 200px;
margin: 5px;
}
</style>
</head>
<body>
<p class="spliter">分割线</p>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
美化选中的文本
::selection {
color: aqua;
background-color: blanchedalmond;
}
1
2
3
4
2
3
4