CSS 1.0~3.0选择器（下）

HTML5学堂：对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用，我们那么有些选择器还是无法简单获取某元素，对于CSS3的选择器的产生，让我们更加方便的获取元素，本文讲解了CSS3的选择器有哪些，希望整理好的CSS3选择器对大家有帮助！谢谢！

6.CSS 3的同级元素通用选择器

选择器	含义	示例
E ~ F	匹配任何在E元素之后的同级F元素	p ~ ul { background:#ff0; }

7．CSS 3 属性选择器

选择器	含义	示例
E[att^=”val”]	属性att的值以”val”开头的元素	div[id^="nav"] { background:#ff0; }
E[att$=”val”]	属性att的值以”val”结尾的元素
E[att*=”val”]	属性att的值包含”val”字符串的元素

8. CSS 3中与用户界面有关的伪类

选择器	含义	示例
E:enabled	匹配表单中激活的元素	input[type="text"]:disabled { background:#ddd;}
E:disabled	匹配表单中禁用的元素
E:checked	匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
E::selection	匹配用户当前选中的元素

欢迎沟通交流~HTML5学堂

9. CSS 3中的结构性伪类

选择器	含义	示例
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	匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素

10.CSS 3的反选伪类

选择器	含义	示例
E:not(s)	匹配不符合当前选择器的任何元素	:not(p) { border:1px solid #ccc; }

11. CSS 3中的 :target 伪类

选择器	含义
E:target	匹配文档中特定”id”点击后的效果