CSS一直在不断演进,引入新的伪类选择器以增强开发者对文档样式的控制能力。has
、is
和where
是近期较为知名的新增选择器,它们并不在本文涉及范围之内,请移步至专门介绍的文章。以下列出了一些CSS中主要伪类选择器:
-
:root
: 选择文档树的根元素,通常是<html>
。 -
:target
: 选择当前活动的目标元素,它的id与当前URL的片段标识符匹配。 -
:empty
: 选择没有任何子元素(包括文本节点)的元素。 -
:not(X)
: 否定伪类,选择不符合括号里条件的元素。 -
:first-of-type
: 选择属于其父元素的特定类型的第一个元素。 -
:last-of-type
: 选择属于其父元素的特定类型的最后一个元素。 -
:only-of-type
: 选择其类型在所有兄弟元素中唯一的元素。 -
:only-child
: 选择没有兄弟元素的元素。 -
:nth-child(an+b)
: 选择其父元素的第an+b
个子元素。 -
:nth-last-child(an+b)
: 同:nth-child
,但是从最后一个子元素开始计数。 -
:first-child
: 选择器匹配作为第一个子元素的元素。 -
:last-child
: 选择器匹配作为最后一个子元素的元素。 -
:nth-of-type(an+b)
: 选择属于其父元素的特定类型的一个或多个元素,顺序关系按an+b
计算。 -
:nth-last-of-type(an+b)
: 同:nth-of-type
,但是从最后一个子元素开始计数。 -
:focus-within
: 选择器匹配获得焦点的元素,以及这个元素里面获得焦点的元素。 -
:fullscreen
: 选择当前处于全屏模式的元素。 -
:hover
: 匹配鼠标悬停其上的元素。 -
:active
: 匹配激活状态的元素,通常是鼠标点击不放时的状态。 -
:checked
: 选择每个被选中的input
元素(仅适用于单选框和复选框)。 -
:indeterminate
: 选择处于不确定状态的表单元素,如没有选中任何单选按钮或复选框的一组按钮。 -
:placeholder-shown
: 选择显示占位文本的<input>
或<textarea>
元素。 -
:required
: 匹配设置了required
属性的表单元素。 -
:optional
: 匹配没有required
属性的表单元素。 -
:valid
: 匹配所有输入值有效的<input>
元素。 -
:invalid
: 匹配所有输入值无效的<input>
元素。 -
:in-range
: 匹配属性值在指定范围内的<input>
元素。 -
:out-of-range
: 匹配属性值在指定范围外的<input>
元素。 -
:read-only
: 选择器匹配没有readonly
属性的表单元素。 -
:read-write
: 选择器匹配设有readonly
属性的表单元素。 -
:focus-visible
: 用来匹配获得键盘焦点的元素,并且用户代理决定应展示焦点样式。 -
:default
: 选择器匹配一组中默认被选取的<option>
,<button>
等元素。 -
:blank
: 匹配空白文本或包含空白(空格、换行等)的元素。