伪类在前端开发中用于选择元素的特定状态，而不是基于元素的属性、类或 ID。它们允许你根据用户的交互或文档树中的位置来设置样式。
伪类可以大致分为以下几大类：
-
动态伪类: 这些伪类基于用户的交互而改变元素的样式。 它们代表了元素的一种瞬时状态。 常见的动态伪类包括：
:link: 未访问的链接。:visited: 已访问的链接。:hover: 鼠标悬停在元素上。:active: 元素被激活，例如鼠标点击或键盘按下。:focus: 元素获得焦点，例如表单输入框被选中。
-
UI元素状态伪类: 这些伪类针对表单元素或其他UI元素的特定状态。
:enabled: 启用的表单元素。:disabled: 禁用的表单元素。:checked: 选中的单选框或复选框。:indeterminate: 处于不确定状态的复选框 (例如，父复选框的子复选框部分选中)。:default: 默认选中的表单元素 (例如，按钮)。:valid: 表单元素的值有效。:invalid: 表单元素的值无效。:in-range: 表单元素的值在指定范围内。:out-of-range: 表单元素的值超出指定范围。:required: 必填的表单元素。:optional: 可选的表单元素。:read-only: 只读的表单元素。:read-write: 可读写的表单元素。:placeholder-shown: 表单元素显示占位符文本。
-
结构性伪类: 这些伪类根据元素在文档树中的位置来选择元素。
:root: 文档的根元素，通常是<html>元素。:first-child: 父元素的第一个子元素。:last-child: 父元素的最后一个子元素。:first-of-type: 父元素的第一个指定类型的子元素。:last-of-type: 父元素的最后一个指定类型的子元素。:nth-child(n): 父元素的第 n 个子元素。:nth-last-child(n): 父元素的倒数第 n 个子元素。:nth-of-type(n): 父元素的第 n 个指定类型的子元素。:nth-last-of-type(n): 父元素的倒数第 n 个指定类型的子元素。:only-child: 父元素的唯一子元素。:only-of-type: 父元素的唯一指定类型的子元素。:empty: 没有子元素的元素（包括文本节点）。
-
其他伪类: 一些不完全属于以上类别的伪类。
:not(selector): 不匹配指定选择器的元素。:target: URL 片段标识符指向的元素。:is(selectors): 匹配括号中任意一个选择器的元素，类似于or操作.:where(selectors): 类似于:is(), 但优先级更低.:has(selectors): 如果元素包含至少一个与指定选择器匹配的元素，则匹配该元素。 (相对较新)
需要注意的是，不同的伪类可以组合使用以实现更精细的样式控制。 例如，a:hover:visited 选择鼠标悬停在已访问链接上的样式。 理解和运用伪类是编写高效 CSS 的关键技能。