CSS 伪类

Kpsmart2025年3月4日大约 5 分钟

CSS 伪类

CSS 伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。本文档提供了 CSS 伪类的完整参考。

常用伪类

伪类	描述	示例
:hover	鼠标悬停在元素上时	`a:hover`
:active	元素被激活时（如点击）	`button:active`
:focus	元素获得焦点时	`input:focus`
:visited	已访问的链接	`a:visited`
:link	未访问的链接	`a:link`
:focus-visible	元素通过键盘导航获得焦点时	`button:focus-visible`
:focus-within	元素自身或其后代获得焦点时	`form:focus-within`
:target	当前活动的锚点目标元素	`#section:target`

结构性伪类

伪类	描述	示例
:first-child	作为第一个子元素的元素	`li:first-child`
:last-child	作为最后一个子元素的元素	`li:last-child`
:nth-child(n)	匹配特定位置的子元素	`tr:nth-child(odd)`
:nth-last-child(n)	从后往前匹配特定位置的子元素	`li:nth-last-child(2)`
:first-of-type	特定类型的第一个子元素	`p:first-of-type`
:last-of-type	特定类型的最后一个子元素	`p:last-of-type`
:nth-of-type(n)	匹配特定类型和位置的元素	`p:nth-of-type(2)`
:nth-last-of-type(n)	从后往前匹配特定类型和位置的元素	`p:nth-last-of-type(2)`
:only-child	作为唯一子元素的元素	`div:only-child`
:only-of-type	特定类型的唯一子元素	`p:only-of-type`
:empty	没有子元素的元素	`p:empty`
:root	文档的根元素	`:root`

表单相关伪类

伪类	描述	示例
:checked	选中的表单元素	`input:checked`
:disabled	禁用的表单元素	`button:disabled`
:enabled	启用的表单元素	`input:enabled`
:valid	内容有效的表单元素	`input:valid`
:invalid	内容无效的表单元素	`input:invalid`
:required	必填的表单元素	`input:required`
:optional	非必填的表单元素	`input:optional`
:in-range	值在指定范围内的表单元素	`input:in-range`
:out-of-range	值超出指定范围的表单元素	`input:out-of-range`
:read-only	只读的表单元素	`input:read-only`
:read-write	可读写的表单元素	`input:read-write`
:placeholder-shown	显示占位符文本的表单元素	`input:placeholder-shown`
:default	默认选中的表单元素	`input:default`
:indeterminate	处于不确定状态的表单元素	`input:indeterminate`

逻辑组合伪类

伪类	描述	示例
:not(selector)	不匹配指定选择器的元素	`div:not(.special)`
:is(selector-list)	匹配选择器列表中任何一个选择器的元素	`:is(header, main, footer) p`
:where(selector-list)	与 :is() 类似，但优先级为 0	`:where(header, main, footer) p`
:has(selector)	包含匹配指定选择器的元素的元素	`div:has(> img)`

语言和方向性伪类

伪类	描述	示例
:lang(language)	基于元素语言的元素	`p:lang(zh)`
:dir(direction)	基于文本方向的元素	`p:dir(rtl)`

使用示例

/* 常用伪类示例 */
a:hover { text-decoration: underline; }
button:active { transform: translateY(1px); }
input:focus { border-color: blue; }
a:link { color: blue; }
a:visited { color: purple; }
#section:target { background-color: #ffffd0; }

/* 结构性伪类示例 */
li:first-child { font-weight: bold; }
tr:nth-child(even) { background-color: #f2f2f2; }
tr:nth-child(odd) { background-color: #ffffff; }
p:last-child { margin-bottom: 0; }
:root { --main-color: #06c; }
div:empty { display: none; }
p:nth-of-type(3n+1) { margin-top: 2em; }

/* 表单相关伪类示例 */
input:required { border-left: 4px solid red; }
input:valid { border-left: 4px solid green; }
input:invalid { background-color: #fff0f0; }
input:disabled { opacity: 0.5; }
input:checked + label { font-weight: bold; }
input:in-range { border-color: green; }
input:out-of-range { border-color: red; }
input:placeholder-shown { background-color: #f8f8f8; }

/* 逻辑组合伪类示例 */
div:not(.special) { background-color: #f0f0f0; }
:is(h1, h2, h3):hover { color: #06c; }
:where(article, section) p { line-height: 1.6; }
div:has(> img) { padding: 10px; }

/* 语言和方向性伪类示例 */
p:lang(zh) { font-family: "SimSun", serif; }
p:dir(rtl) { text-align: right; }

伪类的高级用法

组合使用伪类

伪类可以组合使用，创建更精确的选择器：

/* 选择被禁用且必填的输入框 */
input:disabled:required {
  border: 1px dashed red;
}

/* 选择鼠标悬停在非禁用按钮上时 */
button:not(:disabled):hover {
  background-color: #0056b3;
}

/* 选择第一个且是唯一子元素的段落 */
p:first-child:only-child {
  font-size: 1.2em;
}

使用 :nth-child() 和 :nth-of-type() 的公式

这些伪类接受形式为 an+b 的参数，其中：

a 是步长
b 是偏移量
n 是从 0 开始的计数器

/* 选择每第三个元素 */
li:nth-child(3n) { background-color: #f0f0f0; }

/* 选择第一个和每隔4个元素 */
li:nth-child(4n+1) { font-weight: bold; }

/* 选择前三个元素 */
li:nth-child(-n+3) { border-bottom: 1px solid #ddd; }

/* 选择最后三个元素 */
li:nth-last-child(-n+3) { border-top: 1px solid #ddd; }

浏览器兼容性

大多数常用伪类在现代浏览器中都得到良好支持。以下是一些需要注意的兼容性问题：

伪类	Chrome	Firefox	Safari	Edge	IE
基本伪类(:hover, :active, :focus)	完全支持	完全支持	完全支持	完全支持	8+
结构性伪类(:nth-child, :first-of-type)	完全支持	完全支持	完全支持	完全支持	9+
:focus-visible	86+	85+	15.4+	86+	不支持
:focus-within	60+	52+	10.1+	79+	不支持
:is()	88+	78+	14+	88+	不支持
:where()	88+	78+	14+	88+	不支持
:has()	105+	121+	15.4+	105+	不支持