CSS教程

更新时间2025-07-16

组合器参考手册伪元素参考手册

CSS 伪类

伪类用于定义元素的特殊状态。

例如，它可以用于：

当用户将鼠标悬停在元素上时设置样式
为已访问和未访问的链接设置不同的样式
当元素获得焦点时设置样式
为有效/无效/必填/选填的表单元素设置样式

下表展示了 CSS 中不同的伪类：

伪类	例子	例子描述
:active	a:active	选择活动链接
:any-link	a:anylink	选择所有带有 href 属性的 <a> 或 <area> 元素。
:auto-fill	input:autofill	选择所有由浏览器自动填充值的 <input> 元素。
:checked	option:checked	匹配所有被选中的 <input> 或 <option> 元素。
:default	input:default	选择一组相关元素中的默认表单元素。
:defined	:defined	选择所有已定义的元素（标准或自定义元素）。
:dir()	:dir(rtl)	选择具有指定文本方向的元素。
:disabled	option:disabled	选择所有被禁用的元素，常用于表单元素。
:empty	div:empty	选择所有没有子元素（包括文本节点）的元素。
:enabled	input:enabled	选择所有启用的元素，常用于表单元素。
:first	@page :first	表示打印文档的第一页（与 @page 规则一起使用）。
:first-child	p:first-child	选择作为其父元素第一个子元素的元素（在一组兄弟元素中）。
:first-of-type	li:first-of-type	选择一组兄弟元素中第一个特定类型的元素。
:focus	select:focus	选择获得焦点的元素，常用于表单元素。
:focus-visible	button:focus-visible	选择获得焦点的元素（仅在通过键盘而非鼠标聚焦时应用焦点样式）。
:focus-within	form:focus-within	匹配元素或其任何后代获得焦点的元素。
:fullscreen	:fullscreen	选择当前处于全屏模式的元素。
:has()	h2:has(+p)	选择紧接在 <p> 元素后的 <h2> 元素，并将样式应用于 <h2>。
:hover	a:hover	选择鼠标悬停的元素。
:in-range	input:in-range	选择值在指定范围内的 <input> 元素。
:indeterminate	input:indeterminate	选择处于不确定状态的表单元素。
:invalid	input:invalid	选择无效的表单元素。
:is()	:is(ul, ol)	选择所有 <ul> 和 <ol> 元素。
:lang()	p:lang(it)	选择 lang 属性为 "it"（意大利语）的 <p> 元素。
:last-child	li:last-child	选择作为其父元素最后一个子元素的 <li> 元素。
:last-of-type	p:last-of-type	选择作为其父元素最后一个 <p> 元素的 <p> 元素。
:left	@page :left	表示打印文档的所有左侧页面（与 @page 规则一起使用）。
:link	a:link	选择所有未访问的链接。
:modal	:modal	选择处于模态状态的元素。
:not()	:not(p)	选择所有不是 <p> 元素的元素。
:nth-child()	p:nth-child(2)	选择作为其父元素第二个子元素的 <p> 元素。
:nth-last-child()	p:nth-last-child(2)	选择作为其父元素倒数第二个子元素的 <p> 元素。
:nth-last-of-type()	p:nth-last-of-type(2)	选择作为其父元素倒数第二个 <p> 元素的 <p> 元素。
:nth-of-type()	p:nth-of-type(2)	选择作为其父元素第二个 <p> 元素的 <p> 元素。
:only-child	p:only-child	选择作为其父元素唯一子元素的 <p> 元素。
:only-of-type	p:only-of-type	选择作为其父元素唯一 <p> 元素的 <p> 元素。
:optional	textarea:optional	选择没有 required 属性的 <input>、<select> 或 <textarea> 元素。
:out-of-range	input:out-of-range	选择值超出指定范围的 <input> 元素。
:placeholder-shown	input:placeholder-shown	选择当前显示占位符文本的 <input> 或 <textarea> 元素。
:popover-open	:popover-open	选择处于显示弹出状态的元素。
:read-only	input:read-only	选择带有 readonly 属性的输入元素。
:read-write	input:read-write	选择可编辑的输入元素。
:required	input:required	选择带有 required 属性的输入元素。
:right	@page :right	表示打印文档的所有右侧页面（与 @page 规则一起使用）。
:root	:root	选择文档的根元素。
:scope	:scope	选择作为选择器匹配参考点或范围的元素。
:state()	:state()	选择具有指定自定义状态的自定义元素。
:target	:target	选择当前活动的目标元素。
:user-invalid	:user-invalid	选择具有无效值的表单元素（在用户与其交互后）。
:user-valid	:user-valid	选择具有有效值的表单元素（在用户与其交互后）。
:valid	input:valid	选择所有具有有效值的输入元素。
:visited	a:visited	选择所有已访问的链接。
:where()	:where(ol, ul)	选择所有 <ul> 和 <ol> 元素。

组合器参考手册伪元素参考手册