伪类和伪元素都是添加到选择器末的关键词，不同的是
- 伪类：指定要选择元素特殊状态时的样式。
: - 伪元素：允许对被选择元素的特定部分修改样式。
:: - 伪类的操作对象是文档树中已有的元素，伪元素创建了一个文档树外的元素。
| 伪元素 | 用法 |
|---|---|
::first-letter |
选中块级元素的第一行首字母 |
::first-line |
选择块级元素的第一行 |
::before |
创建一个伪元素，成为被选择中元素的第一个子元素，默认行内元素，通过content修饰内容. |
::after |
不能应用在替换元素，如img video iframe canvas
|
::selection |
应用于文档中被用户高亮的部分，如被鼠标选中 |
::placeholder |
选择表单元素中的占位文本 |
::backdrop |
全屏模式下渲染的顶层元素 |
::slotted |
选定被放在html模板中的元素，只适用于影子节点树，只始用于元素节点 |
::marker |
选择列表的前置标记 |
| 伪类 | 用法 |
|---|---|
:link |
未访问过 |
:visited |
已访问过 |
:hover |
用户鼠标悬停 |
:active |
被激活 |
:disabled |
表示被禁用的任何元素 |
:not |
用来匹配不符合一组选择器的元素，防止特定的元素被选中 |
:out-of-range |
表示一个 <input> 元素，其当前值处于属性 min和max 限定的范围外。 |
:in-range |
代表一个 <input> 元素，其当前值处于属性min 和max 限定的范围之内. |
:only-child |
匹配没有任何兄弟元素的元素 |
:first-child |
表示在一组兄弟元素中的第一个元素 |
:last-child |
表示在一组兄弟元素中的最后一个元素 |
:only-of-type |
一个元素没有其他相同类型的兄弟元素 |
:first-of-type |
表示一组兄弟元素中其类型的第一个元素 |
:nth-of-type() |
表示一组兄弟元素中其类型的第n个元素 |
:last-of-type |
表示一组兄弟元素中其类型的最后一个元素 |
:focus |
表示获得焦点的元素（如表单输入） |
:focus-within |
表示一个元素获得焦点，或，该元素的后代元素获得焦点 |
:valid |
内容验证正确的 input或form
|
:invalid |
未通过验证的input 或form
|
@page :first |
打印文档时，第一页的样式 |
:target
|
选择id与当前url hash片段匹配的元素 |
:required |
任意 <input> 元素表示任意拥有required属性的 <input> 或 <textarea> 元素使用它 |
:optional |
表示任意没有required属性的 <input>，<select> 或 <textarea> 元素使用它 |
:root |
文档树的根元素 |
lang |
基于元素语言来匹配页面元素 |
:empty |
表示没有子元素的元素 |
:checked |
表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或select 元素中的option
|
:default |
一组相关元素中的默认表单元素 |
优先级 由高到低：
!important- 内联
- id
- 类/属性/伪类
- 标签/伪元素
