CSS伪类
CSS伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类 :hover 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。
/* 用户的指针悬停在其上的任何按钮 */
button:hover {
color: blue;
}
伪类由冒号（:）后跟着伪类名称组成（例如，:hover）。函数式伪类还包含一对括号来定义参数（例如，:dir()）。附上了伪类的元素被定义为锚元素（例如，button:hover 中的 button）。
伪类让你可以将样式应用于元素，不仅与文档树内容有关，也与外部因素有关——如与导航历史有关的（例如，:visited）、与其内容的状态有关的（如某些表单元素上的 :checked）或者与鼠标位置有关的（如 :hover，它可以让你知道鼠标是否在一个元素上）。
伪类的主要分类
元素显示状态伪类
这些伪类可以基于元素的显示状态来选择它们。
:fullscreen
匹配当前处于全屏模式的所有元素。如果有多个元素被放置在全屏模式下，则此选择器将匹配所有这些元素。
input伪类
input伪类和表单元素有关, 能根据交互前后的html属性和状态来选择元素。
:enabled
表示任何已启用的元素。如果元素可以被激活（例如被选择、单击、输入文本等），或者能够获得焦点，那么它就是启用的。该元素还有一个被禁用的状态，在此状态下它无法被激活或接受焦点。
:disabled
表示任何被禁用的元素。如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。
:read-only
表示元素不可被用户编辑的状态（如锁定的文本输入框）。
:read-write
代表一个元素（例如可输入文本的 input 元素）可以被用户编辑。
:placeholder-shown
表示当前显示placeholder的任何input或textarea元素。
:default
表示一组相关元素中的默认表单元素。该选择器可以在button,checkbox,input, 以及 option 上使用。
:checked
表示任何处于选中状态的radio,checkbox或select元素中的option。
:indeterminate
表示任何处于选中状态的radio,checkbox或select元素中的option。
表示任意的状态不确定的表单元素，例如那些将 HTML indeterminate 属性设置为 true 的复选框，以及属于某个组且该组中所有单选按钮都未选中的单选按钮，还有不确定状态的 progress 元素。
:valid
表示内容验证正确的input 或其他 form 元素。
:invalid
用来选择任何未通过验证的 form、fieldset、input 或其他表单元素。
:invalid
用来选择任何未通过验证的 form、fieldset、input 或其他表单元素。
:in-range
代表一个 input 元素，其当前值处于属性 min 和 max 限定的范围之内
:out-of-range
表示一个 input 元素，其当前值处于属性 min 和 max 限定的范围外
:required
表示任何设置了 required 属性的 input、select 或 textarea 元素
:optional
表示任何未设置 required 属性的 input、select 或 textarea 元素
:lang
表示任何未设置 required 属性的 input、select 或 textarea 元素
语言的伪类
这些伪类根据文档语言而反应，可以基于语言或书写方向来选择元素。
:lang
表示任何未设置 required 属性的 input、select 或 textarea 元素
位置伪类
这些伪类与链接以及当前文档中的目标元素有关。
:any-link
表示作为超链接源锚点的元素，无论是否已被访问。
:link
表示尚未被访问的元素，匹配每个具有 href 属性的未访问的 a 或 area 元素
:visited
会在用户访问链接后生效，出于隐私保护的原因，使用该选择器可以修改的样式非常有限
:target
表示一个唯一的元素（目标元素），其 id 与当前 URL 片段匹配
树结构的伪类
这些伪类与文档树中的元素位置有关。
:root
匹配文档树的根元素。对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同。
:nth-child
首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从 1 开始排序，选择的结果为 CSS 伪类:nth-child 括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3...）。
:nth-last-child
从兄弟节点中从后往前匹配处于某些位置的元素
:first-child
表示在一组兄弟元素中的第一个元素。
:last-child
表示在一组兄弟元素中的最后一个元素。
:only-child
表示没有任何兄弟元素的元素。这与 :first-child:last-child 或 :nth-child(1):nth-last-child(1) 相同，但前者具有更小的权重性。
:nth-of-type
基于相同类型（标签名称）的兄弟元素中的位置来匹配元素。
:nth-last-of-type
基于元素在相同类型（标签名）的兄弟元素中相对最后一个元素的位置来匹配元素。
:first-of-type
表示一组兄弟元素中其类型的第一个元素。
:last-of-type
表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。
:only-of-type
代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。
用户行为伪类
这些伪类需要用户进行一些交互才能够应用，例如将鼠标指针悬停在元素上。
:hover
在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常情况下，用户将光标（鼠标指针）悬停在元素上时触发。
:active
匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。
:focus
表示获得焦点的元素（如表单输入）。当用户点击或轻触一个元素或使用键盘的 Tab 键选择它时，它会被触发。
:focus-visible
当元素匹配:focus伪类并且客户端 (UA) 的启发式引擎决定焦点应当可见 (在这种情况下很多浏览器默认显示“焦点框”。) 时，:focus-visible 伪类将生效。
这个选择器可以有效地根据用户的输入方式 (鼠标 vs 键盘) 展示不同形式的焦点。
:focus-within
表示当元素或其任意后代元素被聚焦时，将匹配该元素。
函数式伪类
这些伪类接受可容错选择器列表作为参数。
:is()
以选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。
:not()
用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）
:where()
:where() CSS 伪类函数接受选择器列表作为它的参数，将会选择所有能被该选择器列表中任何一条规则选中的元素。
:where() 和 :is() 的不同之处在于，:where() 的优先级总是为 0，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的。
