CSS3的新增选择器

1.CSS3关系选择器

选择符	名称	版本	简介
E F	包含选择符	CSS1	选择所有被E元素包含的F元素
E>F	子选择符	CSS2	选择所有作为E元素的子元素F
E+F	相邻选择符	CSS2	选择紧贴在E元素之后F元素
E~F	兄弟选择符	CSS3	选择E元素所有兄弟元素

 

       

2.CSS3伪类选择器 

• • 选择符	版本	简介
    E:root	CSS3	匹配文档的根元素。在HTML中，根元素永远是HTML
    E:first-child	CSS2	匹配父元素中的第一个子元素E
    E:last-child	CSS3	匹配父元素中最后一个E元素
    E:only-child	CSS3	匹配属于父元素中唯一子元素的E
    E:nth-child(n)	CSS3	匹配父元素中的第n个子元素E
    E:nth-last-child(n)	CSS3	匹配父元素中的倒数第n个结构子元素E
    E:first-of-type	CSS3	匹配同级兄弟元素中的第一个E元素
    E:last-of-type	CSS3	匹配同类型中的最后一个同级兄弟元素E
    E:only-of-type	CSS3	匹配属于同类型中唯一兄弟元素的E
    E:nth-of-type(n)	CSS3	匹配同类型中的第n个同级兄弟元素E
    E:nth-last-of-type(n)	CSS3	匹配同类型中的倒数第n个同级兄弟元素E
    E:empty	CSS3	匹配没有任何子元素（包括text节点）的元素E

 

4.CSS3 UI元素状态伪类选择器

• • 选择符	简介
    E:enabled	匹配所有用户界面（form表单）中处于可用状态的E元素
    E:disabled	匹配所有用户界面（form表单）中处于不可用状态的E元素
    E:checked	匹配所有用户界面（form表单）中处于选中状态的元素E

 

5.CSS3 属性选择器

选择符	版本	简介
E[att]	CSS2	选择具有att属性的E元素
E[att="val"]	CSS2	选择具有att属性且属性值 等于val的E元素
E[att^~="val"]	CSS2	选择具有att属性且属性值为用空格分隔的字词列表，其中一个等于val的E元素
E[att^="val"]	CSS3	匹配具有att属性、且值以val开头的E元素
E[att$="val"]	CSS3	匹配具有att属性、且值以val结尾的E元素
E[att*="val"]	CSS3	匹配具有att属性、且值中含有val的E元素
E[att|="val"]	CSS2	选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素

 

 

6.CSS3伪对象选择器

选择符	简介
E:first-letter/E::first-letter	设置对象内的第一个字符的样式
E:first-line/E::first-line	设置对象内的第一行样式
E:before/E::before	设置在对象前(依据对象树的逻辑结构)发生的内容，用来和content属性一起使用
E:after/E::after	设置在对象后(依据对象树的逻辑结构)发生的内容，用来和content属性一起使用
E::selection	设置对象被选择时的颜色