CSS3 新增选择器

CSS3 引入了许多新的选择器，使得开发者可以更加灵活地选取和样式化 HTML 元素，以下是一些主要的新增选择器：

1. 属性选择器

属性选择器允许你根据元素的属性和属性值来选择元素。

[attribute]: 选取带有指定属性的元素。

[attribute=value]: 选取带有指定属性和值的元素。

[attribute^=value]: 选取属性值以指定文本开头的元素。

[attribute$=value]: 选取属性值以指定文本结尾的元素。

[attribute*=value]: 选取属性值中包含指定文本的元素。

2. 结构性伪类选择器

结构性伪类选择器允许你根据元素在文档树中的位置或关系来选择元素。

:root: 选取文档的根元素。

:nthchild(n): 选取父元素的第 n 个子元素。

:nthlastchild(n): 选取父元素的倒数第 n 个子元素。

:firstchild: 选取父元素的第一个子元素。

:lastchild: 选取父元素的最后一个子元素。

:onlychild: 选取父元素的唯一子元素。

:nthoftype(n): 选取相同类型的父元素的第 n 个子元素。

:nthlastoftype(n): 选取相同类型的父元素的倒数第 n 个子元素。

:firstoftype: 选取相同类型的父元素的第一个子元素。

:lastoftype: 选取相同类型的父元素的最后一个子元素。

:onlyoftype: 选取相同类型的父元素的唯一子元素。

:empty: 选取没有子元素的元素。

:not(selector): 选取不符合给定选择器的元素。

:target: 选取当前活动的 # 锚点元素。

3. UI状态伪类选择器

UI状态伪类选择器允许你根据元素的状态（如鼠标悬停、被点击等）来选择元素。

:hover: 选取鼠标悬停在其上的元素。

:active: 选取被用户激活的元素。

:focus: 选取具有焦点的元素。

:visited: 选取用户已访问的链接。

:enabled: 选取启用的表单元素。

:disabled: 选取禁用的表单元素。

:checked: 选取被选中的单选框或复选框。

:default: 选取默认的表单元素。

:indeterminate: 选取处于不确定状态的表单元素（如多选复选框）。

以上就是 CSS3 新增的主要选择器，使用这些选择器可以让你更精确地控制页面元素的样式。

本文名称：CSS3新增了哪些选择器?
网址分享：http://www.jxjierui.cn/article/cdieico.html