什么是伪类和伪元素？
- 伪类：以冒号(:)开头，用于选择处于特定状态的元素。
- 伪元素：以双冒号(::)开头，用于在文档中插入虚构的元素。
伪类
- 动态伪类：
:visited、:focus、:hover等 - 状态伪类：
:disabled、:empty、:required等 - 结构伪类：
:first-child、:nth-of-type等 - 其他伪类：
:target、:lang、:not()等
下面的表格详细记录了各种伪类及其描述：
| 伪类 | 描述 | 兼容性 |
|---|---|---|
:active | 元素处于活动状态时 | |
:focus | 元素已获取焦点时 | |
:hover | 元素处于悬浮状态时 | |
:link | 链接未访问时 | |
:visited | 链接已访问时 | |
:first-child | 元素是首个子元素时 | |
:last-child | 元素是最后一个子元素时 | |
:nth-child() | 元素是第 n 个子元素时 | |
:nth-last-child() | 元素是倒数第 n 个子元素时 | |
:only-child | 元素是唯一子元素时 | |
:first-of-type | 元素是首个特定类型的子元素时 | |
:last-of-type | 元素是最后一个特定类型的子元素时 | |
:nth-of-type() | 元素是第 n 个特定类型的子元素时 | |
:nth-last-of-type() | 元素是倒数第 n 个特定类型的子元素时 | |
:only-of-type | 元素是唯一的特定类型的子元素时 | |
:not | 不满足指定条件时 | |
:target | 元素 id 匹配到哈希值时 | |
:root | 元素是文档树的根元素时 | |
:lang() | 匹配到指定语言时 | |
:empty | 元素处于没有子元素状态时 | |
:invalid 和 :valid | 表单项是否有效 | |
:required 和 :optional | 表单项是否必填 | |
:in-range和 :out-of-range | 表单项是否超出范围 | |
:read-only和 :read-write | 表单项是否只读 | |
:enabled和 :disabled | 表单项是否禁用 | 部分浏览器支持（可能需要加前缀，例如 :webkit-或 :-moz-等） |
:fullscreen | 当前处于全屏显示模式时 | 大部分主浏览器都不支持 |
:dir() | 匹配到特定文字书写方向时 | 大部分主浏览器都不支持 |
伪元素
伪元素 选中或创建出来的元素 兼容性
与伪类相比，伪元素就少很多了，常用的如下：
| 伪元素 | 选中或创建出来的元素 | 兼容性 |
|---|---|---|
::first-letter | 选中块状元素中的首字母 | |
::first-line | 选中首行 | |
::before | 在之前创建一个不在文档树中的元素 | |
::after | 在之后创建一个不在文档树中的元素 | |
::placeholder | 选中表单元素的占位文本 | |
::file-selector-button | 选中类型为 file 的 input 里面的 button | |
::selection | 选中被用户高亮的部分 | 部分浏览器支持（可能需要加前缀，例如 :webkit-或 :-moz-等） |
::backdrop | 选中视觉聚焦元素后面的背景元素 | 部分浏览器支持（可能需要加前缀，例如 :webkit-或 :-moz-等） |
::marker | 选中 list 的 marker | 部分浏览器支持（可能需要加前缀，例如 :webkit-或 :-moz-等） |
注意：创建 ::before和 ::after的元素时，必须要设置 content 属性，否则就不存在了。另外宿主元素的 position 别忘记设置成 relative 或 absolute 了，否则布局可能会乱掉。
