CSS3 引入了许多新的伪类选择器,这些选择器为开发者提供了更多的样式控制选项。以下是一些 CSS3 中新增的主要伪类选择器:
- 结构性伪类 :
:root
:选择文档的根元素(通常是<html>
)。:empty
:选择没有子节点的元素(包括文本节点)。:first-of-type
:选择其父元素中的第一个<element-name>
类型的元素。:last-of-type
:选择其父元素中的最后一个<element-name>
类型的元素。:only-of-type
:选择其父元素中唯一的<element-name>
类型的元素。:nth-of-type(n)
:选择其父元素中的第n
个<element-name>
类型的元素。:nth-last-of-type(n)
:选择其父元素中的倒数第n
个<element-name>
类型的元素。
- UI伪类 :
:enabled
:选择可用的表单元素。:disabled
:选择被禁用的表单元素。:checked
:选择被选中的<input>
元素(例如,单选框或复选框)。:default
:选择默认被选中的<input>
或<button>
元素。:valid
:选择输入值有效的表单元素。:invalid
:选择输入值无效的表单元素。:in-range
:选择输入值在指定范围内的<input>
元素。:out-of-range
:选择输入值不在指定范围内的<input>
元素。:required
:选择设置了required
属性的表单元素。:optional
:选择没有设置required
属性的表单元素。:readonly
:选择设置了readonly
属性的表单元素。:writeable
:选择没有设置readonly
属性的表单元素。
- 其他伪类 :
:backdrop
:用于全屏的背景界面(通常与全屏API一起使用)。:fullscreen
:选择全屏显示的元素。:placeholder-shown
:选择当前显示占位符文本的<input>
或<textarea>
元素。:dir()
:基于元素的文本方向(例如:dir(ltr)
或:dir(rtl)
)来选择元素。:lang()
:基于元素的语言属性来选择元素。:not()
:选择不匹配特定选择器的元素。:any-link
:选择所有链接(<a>
、<area>
和<link>
元素)。:current
(伪元素):用于选择当前元素(如::current
在:range
输入类型中)。注意这不是一个标准的 CSS 伪类,但在某些上下文中可能会遇到。
请注意,某些伪类(如 :fullscreen
和 :backdrop
)可能并不是所有浏览器都支持,或者可能需要特定的API(如全屏API)才能触发。同时,:any-link
和 :current
并不是真正的 CSS3 伪类,但它们在这里被提及是为了完整性。