CSS 引入伪类和伪元素概念是为了格式化文档树以外的信息。
伪元素和伪类都不会出现在源文档或者文档树中
伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素。
1. CSS 伪类
伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。
伪类表现得会像是你向你的文档的某个部分应用了一个类一样，在标记文本中减少多余的类，让代码更灵活、更易于维护。
伪类就是开头为冒号的关键字：
/* 语法 */
selector:pseudo-class {
property: value;
}
/* 比如：所有用户指针悬停的按钮 */
button:hover {
color: blue;
}
2. 伪元素
伪元素用于创建一些不在文档树中的元素，并为其添加样式。表现得是像你往标记文本中加入全新的 HTML 元素一样。
伪元素开头为双冒号::。
/* 语法 */
selector::pseudo-element {
property: value;
}
/* 每一个 <p> 元素的第一行。 */
p::first-line {
color: blue;
text-transform: uppercase;
}
3. 伪类和伪元素的组合
比如让第一段的第一行加粗，把 :first-child 和 ::first-line 选择器放到一起。
article p:first-child::first-line {
font-size: 120%;
font-weight: bold;
}
4. 伪类参考
| 选择器 | 描述 |
|---|---|
:active |
在用户激活（例如点击）元素的时候匹配。 |
:any-link |
匹配一个链接的:link 和:visited 状态。 |
:blank |
匹配空输入值的 <input> 元素。 |
:checked |
匹配处于选中状态的单选或者复选框。 |
:current |
匹配正在展示的元素，或者其上级元素。 |
:default |
匹配一组相似的元素中默认的一个或者更多的 UI 元素。 |
:dir |
基于其方向性（HTMLdir 属性或者 CSSdirection 属性的值）匹配一个元素。 |
:disabled |
匹配处于关闭状态的用户界面元素 |
:empty |
匹配除了可能存在的空格外，没有子元素的元素。 |
:enabled |
匹配处于开启状态的用户界面元素。 |
:first |
匹配分页媒体的第一页。 |
:first-child |
匹配兄弟元素中的第一个元素。 |
:first-of-type |
匹配兄弟元素中第一个某种类型的元素。 |
:focus |
当一个元素有焦点的时候匹配。 |
:focus-visible |
当元素有焦点，且焦点对用户可见的时候匹配。 |
:focus-within |
匹配有焦点的元素，以及子代元素有焦点的元素。 |
:future |
匹配当前元素之后的元素。 |
:hover |
当用户悬浮到一个元素之上的时候匹配。 |
:indeterminate |
匹配未定态值的 UI 元素，通常为复选框。 |
:in-range |
用一个区间匹配元素，当值处于区间之内时匹配。 |
:invalid |
匹配诸如 <input> 的位于不可用状态的元素。 |
:lang |
基于语言（HTMLlang 属性的值）匹配元素。 |
:last-child |
匹配兄弟元素中最末的那个元素。 |
:last-of-type |
匹配兄弟元素中最后一个某种类型的元素。 |
:left |
在分页媒体中，匹配左手边的页。 |
:link |
匹配未曾访问的链接。 |
:local-link |
匹配指向和当前文档同一网站页面的链接。 |
:is() |
匹配传入的选择器列表中的任何选择器。 |
:not |
匹配作为值传入自身的选择器未匹配的物件。 |
:nth-child |
匹配一列兄弟元素中的元素——兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。 |
:nth-of-type |
匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。 |
:nth-last-child |
匹配一列兄弟元素，从后往前倒数。兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。 |
:nth-last-of-type |
匹配某种类型的一列兄弟元素（比如，<p>元素），从后往前倒数。兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。 |
:only-child |
匹配没有兄弟元素的元素。 |
:only-of-type |
匹配兄弟元素中某类型仅有的元素。 |
:optional |
匹配不是必填的 form 元素。 |
:out-of-range |
按区间匹配元素，当值不在区间内的的时候匹配。 |
:past |
匹配当前元素之前的元素。 |
:placeholder-shown |
匹配显示占位文字的 input 元素。 |
:playing |
匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。 |
:paused |
匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。 |
:read-only |
匹配用户不可更改的元素。 |
:read-write |
匹配用户可更改的元素。 |
:required |
匹配必填的 form 元素。 |
:right |
在分页媒体中，匹配右手边的页。 |
:root |
匹配文档的根元素。 |
:scope |
匹配任何为参考点元素的的元素。 |
:valid |
匹配诸如 <input> 元素的处于可用状态的元素。 |
:target |
匹配当前 URL 目标的元素（例如如果它有一个匹配当前 URL 分段的元素）。 |
:visited |
匹配已访问链接。 |
4. 伪元素参考
| 选择器 | 描述 |
|---|---|
::after |
匹配出现在原有元素的实际内容之后的一个可样式化元素。 |
::before |
匹配出现在原有元素的实际内容之前的一个可样式化元素。 |
::first-letter |
匹配元素的第一个字母。 |
::first-line |
匹配包含此伪元素的元素的第一行。 |
::grammar-error |
匹配文档中包含了浏览器标记的语法错误的那部分。 |
::selection |
匹配文档中被选择的那部分。 |
::spelling-error |
匹配文档中包含了浏览器标记的拼写错误的那部分。 |
