作为前端人员，每天要与满屏的标签、元素打交道，通过元素与样式类的结合，呈现出一个个美丽优雅的页面，其中也包括css伪类和伪元素的应用，随着前端的发展深入，开发人员运用越来越多的整合技术，使得我们的工作更快捷高效高逼格，下面就来整理一下css中伪类和伪元素的应用；
什么是css伪类(pseudo-class),伪类就是定义个元素的特殊状态的存在，这个特殊状态乍一听以为是什么高科技的玩意，但其实很好理解，比如一个input选框,默认是enable&unchecked，如果是被禁用了被勾选了，就变成特殊状态了，好吧，给个最容易理解也是官方的案例看看：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
/* 未访问的链接样式 */a:link { color: #FF0000;}/* 访问过的链接样式 */a:visited { color: #00FF00;}/* 鼠标滑过后的链接样式 */a:hover { color: #FF00FF;}/* 选中的链接样式 */a:active { color: #0000FF;} |
如例所示，可以给元素定义相应的伪元素，并且只有在处于定义状态的时候才会生效，调试伪元素的样式的时候，可以借助控制台调控元素的状态：
并且伪类可以和类搭配使用：
|
1
2
3
|
a.highlight:hover { color: #ff0000;} |
还有个比较特别的伪元素lang，貌似这个平时用的比较少，就是通过定义不同的lang类型来定义样式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html><html><head><style>q:lang(en) { color:red}</style></head><body><p>呵呵<q lang="en">嘿嘿</q>哈哈</p> </body></html> |
就是下面的效果：
当然css伪元素不止这些，写法也多种多样，不过一般常用的也只有前几个，下面是整理到的css伪类；
css 伪类集合：
| 伪类 | 例子 | 描述 |
|---|---|---|
| :active | a:active | 选中状态 |
| :checked | input:checked | 勾选状态 |
| :disabled | input:disabled | 禁用状态 |
| :empty | p:empty | p元素无子元素 |
| :enabled | input:enabled | 激活状态 |
| :first-child | p:first-child | 父级下的第一个p元素 |
| :first-of-type | p:first-of-type | 父级下第一个p类型元素 |
| :focus | input:focus | 选中状态，光标位于当前 |
| :hover | a:hover | hover状态 |
| :in-range | input:in-range | 定义在一段范围内的值的input |
| :invalid | input:invalid | 所有符合验证条件的元素 |
| :lang(language) | p:lang(it) | 通过lang(it)来定义的p |
| :last-child | p:last-child | 父级下的最后一个p元素 |
| :last-of-type | p:last-of-type | 父级下最后一个p类型元素 |
| :link | a:link | 未访问的链接 |
| :not(selector) | :not(p) | 非p元素 |
| :nth-child(n) | p:nth-child(2) | 父级下的第n个p元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 父级下的倒数第二个元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 父级的第二个p元素，从最后一个子元素算起 |
| :nth-of-type(n) | p:nth-of-type(2) | 其父级的第二个子元素 |
| :only-of-type | p:only-of-type | 当p是其父级的唯一元素类型 |
| :only-child | p:only-child | 当p是其父级的唯一元素 |
| :optional | input:optional | 没有“required”标示的input |
| :out-of-range | input:out-of-range | 不在特定值范围的input |
| :read-only | input:read-only | 带有“readonly”标示的input |
| :read-write | input:read-write | 没有有“readonly”标示的input |
| :required | input:required | 带有“required”标示的input |
| :root | root | 页面根元素 |
| :target | #news:target | 选择的元素锚点 |
| :valid | input:valid | 符合验证的元素 |
| :visited | a:visited | 访问过的 |
其实还是蛮多的哈，不过确实一般开发中常用的只有几种，反正我是没用完
，能达到预想中的开发效果就行，不必强制追求的，有时候还可以配合jquery进行css操作，写法也很简便；
接下来看一下伪元素(pseudo-element)，了解过伪类的定义后，就更好理解伪元素了，css伪元素就是定义元素"一部分"的特殊样式，比如定义元素的第一个字符，第一行，在元素的before、after、center中定义内容；语法如下：
|
1
2
3
|
selector::pseudo-element { property:value;} |
比如定义一个p的第一行：
|
1
2
3
|
p::first-line { color: #ff0000;} |
向一个元素前或者元素后插入部分内容：
|
1
2
3
|
i::before { content: url(pic.gif);} |
这种方式常配合字体图标出现在网页中，以一个元素作为载体，将字体图标加入到元素区域显示,如图所示：
伪元素不多却应用广泛，意思也好懂，示例如下：
| 伪元素 | 例子 | 描述 |
|---|---|---|
| ::after | p::after | p元素后插入内容 |
| ::before | p::before | p元素前插入内容 |
| ::first-letter | p::first-letter | p元素中第一个字符 |
| ::first-line | p::first-line | 第一行 |
| ::selection | p::selection | 用户选中区域 |
原文地址：http://www.xuechenlei.com/2016/12/css-pseudo-class-and-pseudo-element/