CSS 伪类选择器（Pseudo-classes）详解

来源：喔唷网编辑：喔唷教程时间：2025-04-08 浏览：

伪类选择器（Pseudo-classes）是 CSS 中用于选择元素的特定状态或位置的关键字，通常以 “:” 开头。它们可以让你在不修改 HTML 结构的情况下，对元素的不同状态（如悬停、点击、第一个

伪类选择器（Pseudo-classes）是 CSS 中用于选择元素的特定状态或位置的关键字，通常以 “:” 开头。它们可以让你在不修改 HTML 结构的情况下，对元素的不同状态（如悬停、点击、第一个子元素等）应用样式。

1. 常用伪类选择器分类

（1）状态相关伪类

伪类	作用	示例
`:hover`	鼠标悬停时生效	`a:hover { color: red; }`
`:active`	元素被激活（如鼠标按下）时生效	`button:active { background: blue; }`
`:focus`	元素获得焦点（如输入框选中）时生效	`input:focus { border-color: green; }`
`:visited`	已访问的链接	`a:visited { color: purple; }`
`:checked`	选中的复选框/单选框	`input:checked { background: yellow; }`
`:disabled`	禁用的表单元素	`input:disabled { opacity: 0.5; }`
`:enabled`	可用的表单元素	`input:enabled { border: 1px solid #ccc; }`

button:hover {
  background: #f0f0f0;
}

input:focus {
  outline: 2px solid blue;
}

a:visited {
  color: gray;
}

（2）结构相关伪类

伪类	作用	示例
`:first-child`	选择父元素的第一个子元素	`li:first-child { font-weight: bold; }`
`:last-child`	选择父元素的最后一个子元素	`li:last-child { border-bottom: none; }`
`:nth-child(n)`	选择第 `n` 个子元素	`li:nth-child(2) { color: red; }`
`:nth-last-child(n)`	从后往前数第 `n` 个子元素	`li:nth-last-child(1)`（最后一个）
`:first-of-type`	选择同类型的第一个元素	`p:first-of-type`
`:last-of-type`	选择同类型的最后一个元素	`p:last-of-type`
`:nth-of-type(n)`	选择同类型的第 `n` 个元素	`p:nth-of-type(2)`
`:only-child`	选择唯一子元素（父元素只有它一个子元素）	`div:only-child`
`:only-of-type`	选择同类型中的唯一元素	`p:only-of-type`
`:empty`	选择没有子元素的元素（包括文本节点）	`div:empty`

示例：/* 表格隔行变色 */
tr:nth-child(odd) {
  background: #f5f5f5;
}

/* 取消最后一个列表项的下边框 */
ul li:last-child {
  border-bottom: none;
}

/* 第一个段落字体变大 */
p:first-of-type {
  font-size: 1.2em;
}

（3）表单相关伪类

伪类	作用	示例
`:valid`	输入内容符合验证规则时生效	`input:valid { border-color: green; }`
`:invalid`	输入内容不符合验证规则时生效	`input:invalid { border-color: red; }`
`:required`	选择必填的表单元素	`input:required { background: #fff9e6; }`
`:optional`	选择非必填的表单元素	`input:optional { opacity: 0.8; }`
`:in-range`	输入值在范围内时生效	`input:in-range { color: green; }`
`:out-of-range`	输入值超出范围时生效	`input:out-of-range { color: red; }`

示例：

input:invalid {
  border: 2px solid red;
}

input:valid {
  border: 2px solid green;
}

（4）其他伪类

伪类	作用	示例
`:not(selector)`	选择不符合给定选择器的元素	`li:not(.active)`
`:target`	当前 URL 的锚点目标元素	`#section1:target`
`:root`	选择文档的根元素（`<html>`）	`:root { --main-color: blue; }`
`:lang(language)`	选择特定语言的元素	`p:lang(en)`

示例：/* 选择所有不是 .active 的 li */
li:not(.active) {
  opacity: 0.6;
}

/* 当 URL 是 #section1 时，高亮该部分 */
#section1:target {
  background: yellow;
}

2. 伪类选择器的组合使用

伪类可以组合使用，实现更精确的选择：

/* 选中表格的奇数行，并且鼠标悬停时变色 */
tr:nth-child(odd):hover {
  background: #e0e0e0;
}

/* 选中第一个子元素，并且是链接 */
a:first-child:hover {
  color: red;
}

3. 伪类 vs 伪元素

	伪类（Pseudo-class）	伪元素（Pseudo-element）
语法	`:`（单冒号）	`::`（双冒号，CSS3 推荐写法）
作用	选择元素的状态或位置	选择元素的特定部分（如首行、首字母）
示例	`:hover`, `:first-child`	`::before`, `::after`, `::first-line`

示例：

/* 伪类 */
a:hover {
  color: red;
}

/* 伪元素 */
p::first-line {
  font-weight: bold;
}

4. 浏览器兼容性

大多数现代浏览器（Chrome、Firefox、Edge、Safari）支持所有常用伪类。
IE 部分支持（如 :last-child 在 IE9+ 才支持）。
移动端兼容性良好。

伪类选择器用于选择元素的特定状态或位置，如 :hover、:first-child、:checked。
常用分类：状态伪类（:hover, :focus）结构伪类（:first-child, :nth-child）表单伪类（:valid, :checked）其他伪类（:not(), :target）
可以组合使用，如 a:first-child:hover。
与伪元素（::before, ::after）不同，伪类选择的是元素本身的状态。掌握伪类选择器可以让你的 CSS 更加强大和灵活！