css选择器总结！

1、基本选择器

*、element、class、id

2、多元素组合选择器(E,F指element)

E,F 多元素选择器，用逗号分开，同时匹配E和F！

E F 后代元素选择器，用空格隔开，指所有后代元素！

E>F 子元素选择器，用>隔开，指第一代后代元素！

E+F 相邻元素选择器，用+隔开，指紧接着E后的另一个元素！

E~F css3同级元素通用选择器，用~隔开，指匹配任何在E元素之后的同级F元素！(CSS 3)

注意:

css 子元素选择器和后代选择器的区别：

>作用于直接的第一代，空格作用于所有后代。

css兄弟选择器+和~区别：

+作用于紧接在另一个元素后的元素，而且二者有相同的父元素，~作用于某一个指定元素的后面的所有兄弟结点。

3、css2.1属性选择器

E[artibute=val](还有几个，不常用)

4、css2.1伪类

E:first-child 匹配父元素的第一个子元素

E:link 匹配未被点击的链接

E:visited 匹配已被点击的链接

E:active 匹配鼠标已经按下、还没有释放的E元素

E:hover 匹配鼠标悬停的E元素

E:focus 匹配获得当前焦点的E元素

5、css2.1伪元素

E:first-line 匹配E元素的第一行

E:first-letter 匹配E元素的第一个字母

E:before 在E元素之前插入生成的内容

E:after 在E元素之后插入的内容

伪类和伪元素的区别和特征：

CSS3伪类的功能有两种：

1. 获取不存在与DOM树中的信息。比如<a>标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；
2. 获取不能被常规CSS选择器获取的信息。比如伪类:target，它的作用是匹配文档(页面)的URI中某个标志符的目标元素，例如我们可以通过如下代码来实现页面内的区域跳转。

CSS3伪类的定义：

         伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：document接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。

最后，总结一下：

1. 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
2. 伪元素本质上是创建了一个有内容的虚拟容器；
3. CSS3中伪类和伪元素的语法不同；
4. 可以同时使用多个伪类，而只能同时使用一个伪元素；

6、CSS 3 属性选择器

E[attr^='val' ] 匹配属性attr的值以‘val’开头的元素！

E[attr$='val'] 匹配属性attr的值以“val”结尾的元素！

E[attr*='val'] 匹配属性attr的值包含‘val’字符串的元素！

7、css3的结构性伪类

E：empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 eg：<p></p>

：root 匹配html标签

E：nth-child(n) 匹配第n个子元素E,n从1开始！

E：nth-last-child(n) 匹配倒数第n个子元素E,n从1开始！

E：first-child===E：nth-child(1)

E：last-child===E：nth-last-child(1)

E：only-child 匹配只有E一个子元素的元素（只有E一个元素,没有其它元素）

E：nth-of-type(n) 匹配和E相同标签的元素,n从1开始！

E：nth-last-of-type(n) 匹配从倒数开始的和E相同标签的元素，n从1开始！

E：first-of-type===E：nth-of-type(1)

E：last-of-type===E：nth-last-of-type(1)

E：only-of-type 匹配只有E一种相同类型的标签（可以有其它标签）

注意：

E：only-child 匹配只有E一个子元素的元素（只有E一个元素,没有其它元素）

E：only-of-type 匹配只有E一种相同类型的标签（可以有其它标签）

8、CSS 3的反选伪类

E：not(selector)     eg: p:not(.first){color:red}

9、CSS 3中的 :target 伪类

突出显示活动的 HTML 锚：

(转自链接http://www.ruanyifeng.com/blog/2009/03/css_selectors.html）