CSS3新增了哪些选择器?

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新增了哪些选择器?
标题URL:http://bzwzjz.com/article/cdieico.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站制作 重庆网站建设 营销型网站建设 宜宾网站设计 网站建设改版 营销型网站建设 网站建设推广 成都营销网站制作 网站制作 成都网站设计 成都网站设计公司 网站设计 重庆手机网站建设 成都网站制作公司 古蔺网站建设 手机网站制作 成都网站设计 成都网站设计 网站制作 成都网站建设 成都企业网站制作 定制级高端网站建设