CSS 伪类选择器是一种特殊的选择器，用于选择处于特定状态或满足某种条件的元素。伪类选择器不是真正的 HTML 类，而是 CSS 提供的一种方式，用于根据元素的状态或位置来应用样式。伪类选择器以冒号 : 开头，并附加到元素选择器之后。
伪类选择器的类型
CSS 伪类选择器大致可以分为以下几类：
- 用户行为相关的伪类:
:hover: 当用户将鼠标指针悬停在元素上时应用样式。:active: 当元素被激活时（例如鼠标按下时）应用样式。:focus: 当元素获得焦点时应用样式。:focus-within: 当元素或其后代元素获得焦点时应用样式。:target: 当元素被 URL 的哈希引用所指向时应用样式。:visited: 当链接被访问过后应用样式。
- 元素状态相关的伪类:
:checked: 当元素被选中时应用样式，适用于input类型为radio、checkbox等。:enabled: 当元素可用时应用样式。:disabled: 当元素不可用时应用样式。:indeterminate: 当元素未被选中或处于不确定状态时应用样式，适用于input类型为checkbox和radio。
- 元素位置相关的伪类:
:first-child: 选择作为其父元素的第一个子元素。:last-child: 选择作为其父元素的最后一个子元素。:only-child: 选择作为其父元素的唯一子元素。:nth-child(n): 选择作为其父元素的第 n 个子元素。:nth-last-child(n): 选择作为其父元素倒数第 n 个子元素。:nth-of-type(n): 选择作为其父元素的第 n 个特定类型的子元素。:nth-last-of-type(n): 选择作为其父元素倒数第 n 个特定类型的子元素。:first-of-type: 选择作为其父元素的第一个特定类型的子元素。:last-of-type: 选择作为其父元素的最后一个特定类型的子元素。:only-of-type: 选择作为其父元素的唯一特定类型的子元素。
- 通用伪类:
:root: 选择文档的根元素（通常是<html>）。:not(selector): 选择不匹配给定选择器的元素。:empty: 选择没有子元素或内容的元素。:lang(language): 选择lang属性与给定语言匹配的元素。
示例
下面是一个简单的示例，展示了如何使用伪类选择器来改变元素的状态：
/* 用户行为相关的伪类 */
a:hover {
color: blue;
}
/* 元素状态相关的伪类 */
input[type="checkbox"]:checked {
background-color: lightgreen;
}
/* 元素位置相关的伪类 */
li:first-child {
font-weight: bold;
}
/* 通用伪类 */
div:not(.container) {
border: 1px solid gray;
}
语法
伪类选择器通常以冒号 : 开头，例如 :hover。在某些情况下，如 :nth-child 和 :nth-last-child，还可以使用更复杂的表达式来指定选择的元素。
总结
伪类选择器是 CSS 中非常强大的工具，它们可以帮助你根据元素的状态、位置或特定条件来选择和样式化页面中的元素。了解并熟练掌握这些伪类选择器可以帮助你更灵活地控制页面布局和样式。
