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 包含锚的名字) |
如果这篇博客有幸帮到了您，欢迎点击下方链接，和更多志同道合的伙伴一起交流，一起进步。
结束语
