这是【CSS 教程系列第 12 篇】，如果觉得有用的话，欢迎关注专栏。

CSS 的选择器有很多，常用的有 元素选择器、id 选择器、class 选择器、后代选择器、子代选择器、并集选择器、交集选择器、伪类选择器、通配符选择器 等。

本篇博客说的是伪类选择器，详细内容如下

一：伪类选择器

作用

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，比如可以选择第 1 个，第 n 个元素。

为什么叫伪类选择器

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的 id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式。

当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。

1：写法

首先写上你用到的选择器，然后在其后面加一个英文冒号":"，在冒号后面写上用到的伪元素即可。如 a:hover

伪元素就是 CSS 用来添加一些选择器的特殊效果。

2：举例说明

这里我以"锚伪类"说一下伪类选择器的用法。

我们知道，链接有四种状态，分别为 未访问的链接、已访问的链接、鼠标悬停到链接以及选定的链接。

这里我写一个 a 链接，看一下这四种状态，CSS 代码如下

	a:link {color: black;}    /*未访问的链接显示 "黑色"*/
	a:visited {color: green;} /*已访问的链接显示 "绿色"*/
	a:hover {color: red;}     /*鼠标悬停到链接显示 "红色"*/
	a:active {color: yellow;} /*选定的链接显示 "黄色"*/

让我们通过 gif 来看一下伪类选择器的演示效果，如下所示

需要说明一下，你访问过的链接，即使你刷新浏览器颜色也不会回到 a:link 时的黑色，你需要把该链接对应的 cookies 以及历史记录全部清理掉才可以。

特别注意

这四个伪元素不是随便写的，其中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。而 a:active 也必须被置于 a:hover 之后，才是有效的。

这四个伪元素的顺序不需要去死记，可以巧记为 " l v 包包非常 ha o "，红色英文字母取的是每个伪元素的首字母。

3：搭配其它选择器

并不是只有 a 元素才可以用伪类选择器，你也可以用其它元素，后面写上伪元素就行了。

这里我举一个伪类选择器搭配类选择器的例子，要实现的功能也很简单，就是鼠标经过文本时，颜色改为蓝色。

HTML 代码如下

	<p class="myClass">不必每分钟都学习，但求学习中每分钟都有收获</p>

CSS 代码如下

	.myClass:hover{color: blue;}

浏览器运行效果如下

4：所有 CSS 伪类/元素

这里参考 菜鸟教程的伪类/伪元素教程 ，我重新整理了一下资料，将原来举例中的"同一元素的选择器"整理到同一个表格。

再次声明：不是说在这个表格的只能这个元素才能用，我这边只是整理了原链接的例子，特此强调。

表格一：a 元素

序号	选择器	示例	功能说明
1	link	a: link	选择所有未访问链接
2	visited	a: visited	选择所有访问过的链接
3	active	a: active	选择正在活动的链接
4	hover	a: hover	把鼠标放在链接上的状态

---

表格二：p 元素

序号	选择器	示例	功能说明
1	empty	p: empty	选择所有没有子元素的 p 元素
2	first-of-type	p: first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
3	last-of-type	p: last-of-type	选择的每个 p 元素是其母元素的最后一个 p 元素
4	last-child	p: last-child	选择所有 p 元素的最后一个子元素
5	not(selector)	:not(p)	选择所有 p 以外的元素
6	nth-child(n)	p: nth-child(2)	选择所有 p 元素的父元素的第二个子元素
7	nth-last-child(n)	p: nth-last-child(2)	选择所有p元素倒数的第二个子元素
8	nth-last-of-type(n)	p: nth-last-of-type(2)	选择所有 p 元素倒数第二个为 p 的子元素
9	nth-of-type(n)	p: nth-of-type(2)	选择所有 p 元素第二个为 p 的子元素
10	only-of-type	p: only-of-type	选择所有仅有一个子元素为 p 的元素
11	only-child	p: only-child	选择所有仅有一个子元素的 p 元素
12	first-letter	p : first-letter	选择每个 p 元素的第一个字母
13	first-line	p: first-line	选择每个 p 元素的第一行
14	first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 p 元素
15	before	p: before	在每个 p 元素之前插入内容
16	after	p: after	在每个 p 元素之后插入内容
17	lang(language)	p:lang(it)	为 p 元素的 lang 属性选择一个开始值

---

表格三：input 元素

序号	选择器	示例	功能说明
1	checked	input: checked	选择所有"选中"的表单元素
2	disabled	input: disabled	选择所有"禁用"的表单元素
3	enabled	input: enabled	选择所有"启用"的表单元素
4	in-range	input: in-range	选择元素指定范围內的值
5	invalid	input: invalid	选择所有无效的元素
6	optional	input: optional	选择没有"required"的元素属性
7	out-of-range	input: out-of-range	选择指定范围以外的值的元素属性
8	read-only	input: read-only	选择"只读"属性的元素属性
9	read-write	input: read-write	选择"没有只读"属性的元素属性
10	required	input: required	选择有"required"属性指定的元素属性
11	valid	input: valid	选择所有有效值的属性
12	focus	input:focus	选择元素输入后具有焦点

---

表格四：其它伪类 / 伪元素

序号	选择器	示例	功能说明
1	root	root	选择文档的根元素
2	target	#news: target	选择当前活动 #news 元素(点击 URL 包含锚的名字)

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

---

结束语

技术是一点一点积累的，大神也不是一天就可以达到的。原地不动就是退步，所以每天进步一点点。 最后，附上一句格言："好学若饥，谦卑若愚"，望共勉。