伪类选择器（pseudo-class selector）是一种用于选择HTML元素特定状态或特征的关键字，它允许开发者基于文档树之外的信息（如用户交互、元素位置或状态变化）来选择元素并应用样式。
伪类选择器以冒号(:)开头，附加在基本选择器后面，用于定义元素的特殊状态。
伪类选择器分类及用法
1. 状态伪类（链接和用户操作）
/* 未访问的链接 */
a:link {color: blue;
}/* 已访问的链接 */
a:visited {color: purple;
}/* 鼠标悬停状态 */
a:hover {color: red;text-decoration: underline;
}/* 激活状态（鼠标按下未释放） */
a:active {color: green;
}/* 获取焦点的元素 */
input:focus {outline: 2px solid orange;
}2. 结构伪类（基于文档结构）
/* 选择第一个子元素 */
li:first-child {font-weight: bold;
}/* 选择最后一个子元素 */
li:last-child {border-bottom: none;
}/* 选择第n个子元素 */
li:nth-child(2) {color: red;
}/* 选择奇数元素 */
tr:nth-child(odd) {background-color: #f2f2f2;
}/* 选择偶数元素 */
tr:nth-child(even) {background-color: #e6e6e6;
}/* 选择特定公式的元素 */
li:nth-child(3n+1) {margin-left: 0;
}/* 选择倒数第n个子元素 */
li:nth-last-child(2) {font-style: italic;
}/* 选择唯一子元素 */
div:only-child {padding: 10px;
}/* 选择第一个同类元素 */
p:first-of-type {font-size: 1.2em;
}/* 选择最后一个同类元素 */
p:last-of-type {margin-bottom: 0;
}/* 选择第n个同类元素 */
p:nth-of-type(2n) {background: #f8f8f8;
}/* 选择唯一同类元素 */
img:only-of-type {border: 3px solid black;
}3. 表单相关伪类
/* 启用状态的元素 */
input:enabled {border: 1px solid #ccc;
}/* 禁用状态的元素 */
input:disabled {background-color: #f0f0f0;color: #999;
}/* 被选中的复选框或单选按钮 */
input:checked {outline: 2px solid blue;
}/* 必填字段 */
input:required {border-left: 3px solid red;
}/* 可选字段 */
input:optional {border-left: 3px solid #ccc;
}/* 有效输入 */
input:valid {border-color: green;
}/* 无效输入 */
input:invalid {border-color: red;
}/* 在范围之内 */
input:in-range {color: green;
}/* 超出范围 */
input:out-of-range {color: red;
}/* 只读元素 */
input:read-only {background-color: #f5f5f5;
}/* 可读可写元素 */
input:read-write {background-color: white;
}4. 其他伪类
/* 否定选择器 */
div:not(.special) {opacity: 0.8;
}/* 根元素 */
:root {--main-color: #4d9fff;
}/* 空元素 */
div:empty {display: none;
}/* 目标元素（当前活动的锚点目标） */
:target {background-color: yellow;
}/* 选择包含指定文本的元素 */
p:contains("重要") {font-weight: bold;
}/* 语言选择器 */
html:lang(zh) {font-family: "Microsoft YaHei", sans-serif;
}5. CSS3新增的伪类（部分）
/* 选择未选中的单选按钮或复选框 */
input:indeterminate {opacity: 0.5;
}/* 选择默认选项 */
option:default {font-weight: bold;
}/* 全屏模式下的元素 */
video:fullscreen {width: 100%;height: auto;
}/* 匹配正在播放的媒体元素 */
video:playing {border: 2px solid green;
}/* 匹配暂停状态的媒体元素 */
video:paused {border: 2px solid #ccc;
}使用技巧
组合使用：伪类可以与其他选择器组合使用
form input:focus:invalid {border-color: red; }性能考虑：结构伪类（如nth-child）可能影响页面渲染性能，尤其在大型DOM中
浏览器兼容性：较新的伪类（如:focus-within）需要检查浏览器支持情况
优先级：伪类与类选择器具有相同的特异性权重（0,1,0）
注意事项
某些伪类（如:visited）由于安全原因，样式受到浏览器限制
结构伪类是基于元素在父元素中的位置，而不是在整个文档中的位置
伪类顺序很重要，特别是对于链接状态（LoVe-HAte顺序：:link, :visited, :hover, :active）
)
