这篇文章主要讲解了“css3新增选择器有什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3新增选择器有什么”吧！css3选择器有：“[att^="val"]”、“
这篇文章主要讲解了“css3新增选择器有什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS3新增选择器有什么”吧！
css3选择器有：“[att^="val"]”、“[att$="val"]”、“[att*="val"]”、“:root”、“:nth-child(n)”、“:last-child”、“:only-child”、“:empty”等等。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
css3新增的选择器
属性选择器（除IE6外的大部分浏览器支持）
E[att^="val"] 属性att的值以"val"开头的元素
E[att$="val"] 属性att的值以"val"结尾的元素
E[att*="val"] 属性att的值包含"val"字符串的元素
实例：p[id^="nav"] {background:#000;}
结构伪类选择器（过滤选择器）
（注：FireFox 1.5/2.0/3.0 支持E:root，FireFox 3.0支持E:last-child、E:empty，由于IE6/7/8不支持，所以选择合适的场景用吧）
| 序号 | 选择器 | 含义 | 实例 |
|---|---|---|---|
| 1 | E:root | 匹配文档的根元素，对于html文档，就是HTML元素 | |
| 2 | E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 | p:nth-child(3) { color:#f00; } |
| 3 | E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个编号为1 | p:last-child { background:#ff0; } |
| 4 | E:nth-of-type(n) | 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 | p:nth-of-type(2){color:red;}选择父元素的第n个子元素p |
| 5 | E:nth-last-of-type(n) | 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 | |
| 6 | E:last-child | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) | |
| 7 | E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) | |
| 8 | E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) | |
| 9 | E:only-child | 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) | p:only-child { background:#ff0; } |
| 10 | E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) | |
| 11 | E:empty | 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 | p:empty { background:#ff0; } |
UI状态伪类选择器（IE6/7/8不支持）
| 序号 | 选择器 | 含义 | 实例 |
|---|---|---|---|
| 1 | E:enabled | 匹配表单中激活的元素 | |
| 2 | E:disabled | 匹配表单中禁用的元素 | input[type="text"]:disabled { background:#DDD; } |
| 3 | E:checked | 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素 | |
| 4 | E::selection | 匹配用户当前选中的元素 |
级元素通用选择器
| 序号 | 选择器 | 含义 | 实例 |
|---|---|---|---|
| 1 | E ~ F | 匹配任何在E元素之后的同级F元素 | p ~ ul { background:#ff0; } |
反选伪类
| 序号 | 选择器 | 含义 | 实例 |
|---|---|---|---|
| 1 | E:not(s) | 匹配不符合当前选择器的任何元素 | :not(p) { border:1px solid #ccc; } |
：target伪类
| 序号 | 选择器 | 含义 | 实例 |
|---|---|---|---|
| 1 | E:target | 匹配文档中特定"id"点击后的效果 |
感谢各位的阅读，以上就是“css3新增选择器有什么”的内容了，经过本文的学习后，相信大家对css3新增选择器有什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
--结束END--
本文标题: css3新增选择器有什么
本文链接: https://www.lsjlt.com/news/270287.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
2024-05-10
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0