极客编程技术分享
HTML5学堂：对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用，我们那么有些选择器还是无法简单获取某元素，对于CSS3的选择器的产生，让我们更加方便的获取元素，本文讲解了CSS3的选择器有哪些，希望整理好的CSS3选择器对大家有帮助！谢谢！
| 选择器 | 含义 | 示例 |
| E ~ F | 匹配任何在E元素之后的同级F元素 | p ~ ul { background:#ff0; } |
| 选择器 | 含义 | 示例 |
| E[att^=”val”] | 属性att的值以”val”开头的元素 |
div[id^="nav"] { background:#ff0; } |
| E[att$=”val”] | 属性att的值以”val”结尾的元素 | |
| E[att*=”val”] | 属性att的值包含”val”字符串的元素 |
| 选择器 | 含义 | 示例 |
| E:enabled | 匹配表单中激活的元素 |
input[type="text"]:disabled { background:#ddd;} |
| E:disabled | 匹配表单中禁用的元素 | |
| E:checked | 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素 | |
| E::selection | 匹配用户当前选中的元素 |
欢迎沟通交流~HTML5学堂
| 选择器 | 含义 | 示例 |
| E:root | 匹配文档的根元素，对于HTML文档，就是HTML元素 |
p:nth-child(3) { color:#f00; } p:nth-child(odd) { color:#f00; } p:nth-child(even) { color:#f00; } p:nth-child(3n+0) { color:#f00; } p:nth-child(3n) { color:#f00; } tr:nth-child(2n+11) { background:#ff0; } tr:nth-last-child(2) { background:#ff0; } p:last-child { background:#ff0; } p:only-child { background:#ff0; } p:empty { background:#ff0; } |
| E:nth-child(n) | 匹配其父元素的第n个子元素，第一个编号为1 | |
| E:nth-last-child(n) | 匹配其父元素的倒数第n个子元素，第一个编号为1 | |
| E:nth-of-type(n) | 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 | |
| E:nth-last-of-type(n) | 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素 | |
| E:last-child | 匹配父元素的最后一个子元素，等同于:nth-last-child(1) | |
| E:first-of-type | 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1) | |
| E:last-of-type | 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1) | |
| E:only-child | 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) | |
| E:only-of-type | 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) | |
| E:empty | 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 |
| 选择器 | 含义 | 示例 |
| E:not(s) | 匹配不符合当前选择器的任何元素 |
:not(p) { border:1px solid #ccc; } |
| 选择器 | 含义 | |
| E:target | 匹配文档中特定”id”点击后的效果 |
欢迎沟通交流~HTML5学堂
