一，前言
上一篇，主要介绍了 CSS 的选择器，主要涉及以下几点：
CSS 的三大特征；
CSS 选择器的优先级；
CSS 优先级的计算规则；
CSS 选择器的权重；
CSS 选择器面试题；
本篇，介绍 CSS 选择器：伪类和伪元素；
二，伪类（伪类选择器）
1，伪类的简介
2，伪类的语法
<!-- 语法 -->selector:pseudo-class { property: value;}
<!-- 示例 -->a:link { color: #FF0000;}
input:focus { background-color: yellow;}
复制代码
备注：
3，伪类的应用
设置鼠标悬停在元素上时的样式；
为已访问和未访问链接设置不同的样式；
设置元素获得焦点时的样式；
// 示例：a 标签的四种状态，分别对应 4 种伪类；
/* 未访问的链接 */a:link { color: blue;}
/* 已访问的链接 */a:visited { color: red;}
/* 鼠标悬停链接 */a:hover { color: orange;}
/* 已选择的链接（鼠标点击但不放开时） */a:active { color: #0000FF;}
复制代码
注意：
a 标签的 4 个伪类(4 种状态)必须按照一定顺序书写，否则将会失效：
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效；
a:active 必须在 CSS 定义中的 a:hover 之后才能生效；
书写顺序为：a:link、a:visited、a:hover、a:active；
记忆方法：love hate - “爱恨准则”；
4，伪类的意义
5，全部伪类选择器
| **选择器** | **示例** | **备注** || ----- | ----- | ------ || `:active` | `a:active` | 选择活动状态的链接 || `:checked` | `input:checked` | 选择每个被选中的`<input>`元素 || `:disabled` | `input:disabled` | 选择每个被禁用的`<input>`元素 || `:enabled` | `input:enabled` | 选择每个已启用的`<input>`元素 || `:empty` | `p:empty` | 选择没有子元素的每个`<p>`元素 || `:first-child` | `p:first-child` | 选择其父中首个子元素的每个`<p>`元 || `:first-of-type` | `p:first-of-type` | 选择其父中指定类型的首个子元素`<p>` || `:last-child` | `p:last-child` | 选择其父中最后一个子元素的每个`<p>`元素 || `:last-of-type` | `p:last-of-type` | 选择作为其父的最后一个`<p>`元素的每个`<p>`元素 || `:focus` | `input:focus` | 选择获得焦点的`<input>`元素 || `:hover` | `a:hover` | 选择处于鼠标悬停状态的链接 || `:in-range` | `input:in-range` | 选择满足指定范围值的`<input>`元素 || `:invalid` | `input:invalid` | 选择所有无效值的`<input>`元素 || `:lang` | `p:lang(it)` | 选择每个`lang 属性值`以 "it" 开头的`<p>`元素 || `:link` | `a:link` | 选择所有未被访问的链接 || `:not(*selector*)` | `:not(p)` | 选择每个非`<p>`元素的元素 || `:nth-child(*n*)` | `p:nth-child(2)` | 选择作为其父的第二个子元素的每个 `<p>`元素 || `:nth-last-child(*n*)` | `p:nth-last-child(2)` | 选择作为父的第二个子元素的每个`<p>`元素<br>从最后一个子元素计数 || `:nth-last-of-type(*n*)` | `p:nth-last-of-type(2)` | 选择作为父的第二个`<p>`元素的每个`<p>`元素<br>从最后一个子元素计数 || `:nth-of-type(*n*)` | `p:nth-of-type(2)` | 选择作为其父的第二个`<p>`元素的每个`<p>`元素 || `:only-of-type` | `p:only-of-type` | 选择作为其父的唯一`<p>`元素的每个 `<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` | 选择当前活动的`#news`元素（单击包含该锚名称的 URL）|| `:valid` | `input:valid`| 选择所有具有有效值的`<input>` 元素 || `:visited` | `a:visited` | 选择所有已访问的链接 |
复制代码
三，伪元素（伪元素选择器）
1，伪元素的简介
备注：
W3C 为了区分伪类和伪元素，CSS3 的伪元素使用双冒号表示法取代了单冒号表示法；但是，为了能够向后兼容，CSS2 和 CSS1 的伪元素仍可使用单冒号语法；
2，伪元素的语法
<!-- 语法 -->selector::pseudo-element { property: value;}
<!-- 示例 -->p::first-line { color: #ff0000;}
h1::before { content: '♥';}
复制代码
3，伪元素的应用
注意：
todo：后续需要补充伪元素下可以生效的属性有哪些；
4，伪元素的意义
用于创建不在文档树中的元素，并为其添加样式；
伪元素可以创建文档语言无法创建的虚拟元素；
5，全部伪元素选择器
| **选择器** | **示例** | **备注** || ----- | ----- | ------ || `::first-letter` | `p::first-letter` | 选择`<p>`元素的首字母； || `::first-line` | `p::first-line` | 选择`<p>`元素的首行； || `::before` | `p::before` | 在`<p>`元素之前插入内容；<br>必须定义`content`属性；|| `::after` | `p::after` | 在`<p>`元素之后插入内容；<br>必须定义`content`属性；|| `::selection` | `p::selection` | 设置被用户选择时的样式；<br>只能定义被选择时的`color`<br>和`background-color`；|
复制代码
四，伪类和伪元素选择器的区别
伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的元素；
伪类本质上是为了弥补常规 CSS 选择器的不足，以便获取到更多信息；
伪元素本质上是创建了一个有内容的虚拟容器；
CSS3 中伪类和伪元素的语法不同；
在 CSS3 中，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示；
可以同时使用多个伪类，而只能同时使用一个伪元素；
五，结尾
本篇，介绍了 CSS 选择器伪类和伪元素，主要涉及以下几个点：
伪类选择器；
伪元素选择器；
伪类和伪元素选择器的区别；
下一篇，介绍 CSS 变量 var；
评论