Question

css3 新增选择器有哪些？

Answer 1

一、css3之前的选择器

• ID选择器，#

• 类选择器，.

• 包含选择器(E F)

• 伪类选择器（:link,visited,hover,active,focus,first-child）

• 伪元素选择器（::first-line,first-letter,before,after）

• 通配选择器(.)

• 属性选择器(foo[name='martin'])

• 子包含选择器(E>F)

• 相邻兄弟选择器(E+F)

二、css3新增选择器

新增属性选择器：

• E[foo^='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar开头

• E[foo$='bar'] 匹配E元素，该元素包含foo属性，且foo属性值以bar结尾

• E[foo*='bar'] 匹配E元素，该元素包含foo属性，且foo属性值包含bar字符串

新增结构伪类选择器：

• E:root 匹配文档所在的根元素

• E:nth-child(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素也参与排序，若第n个子元素不是E元素，则该语句没有效果（注意这里的n从1开始）

• E:nth-last-child(n) 匹配E所在父元素倒数第n个匹配E的元素

• E:nth-of-type(n) 匹配E所在父元素第n个匹配E的元素，非E的子元素不参与排序(n同样是从1开始）注意区别nth-child(n)

• E:last-child

• E:first-of-type

• E:last-of-type

• E:only-child

• E:only-of-type

• E:empty

另外，使用前要考虑浏览器版本，新增css3选择器存在兼容性问题。平时多多练习，多动手。