细说CSS选择器各种事~

一、基础选择器

        1.标签选择器（例：div）

        2.类选择器（例：.demo）

多个选择器可以调用一个标签

一个类选择器可以调用多个标签     

类选择器

        3.ID选择器

同一个id选择器只能被调用一次,多次调用不符合W3C规范，同时js调用的时候会出问题

同一个标签可以同时调用类选择器和id选择器

ID选择器

        4.通配符选择器

        5.伪类选择器

a:link----超链接的默认状态

a:visited-----超链接的访问之后的状态

a:hover----是超链接鼠标经过的状态

a:active----是超链接激活的状态

二、复合选择器

        1.交集选择器

交集选择器

        2.并集选择器

并集选择器

        3.后代选择器（可以无限隔代）

后代选择器

        4.子代选择器

子代选择器

        5.兄弟选择器

        相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

兄弟选择器

        6.属性选择器

    根据标签的属性来选择

根据标签的属性来选择

根据标签的属性值来选择

根据标签的属性值来选择

根据属性里面等号后面的内容选择

根据属性里面等号后面的内容选择

根据属性里面某个内容开头的标签来选择

根据属性里面某个内容开头的标签来选择

        7.伪元素选择器

选择首字母或汉字

选择首字母或汉字

选择首行

选择首行

选择选中内容

选择选中内容

        8.前后伪元素

前面添加伪元素

前面添加伪元素

后面添加伪元素

后面添加伪元素

三、小知识

        1.CSS优先级

        一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

!important

> 行内 > 内嵌 > 外联

id > 类 > 标签

就近原则（后来样式覆盖之前的）

2.CSS3新增伪类

:nth-child(2n)，实现奇偶选择

:nth-of-type,相同元素第一个

:nth-of-child,父元素的第一个子元素

:empity、:checked、:disabled、:target

3.浏览器是怎样解析CSS选择器的？

        如果不知道匹配规则，可能的理解是从左向右匹配:先找到.mod-nav，然后逐级匹配h3、span，在这个过程中如果遍历到叶子节点都没有匹配就需要回溯，继续寻找下一个分支。但事实上，CSS选择器的读取顺序是从右向左。还是上面的选择器，它的读取顺序变成：先找到所有的span，沿着span的父元素查找h3，中途找到了符合匹配规则的节点就加入结果集；如果直到根元素html都没有匹配，则不再遍历这条路径，从下一个span开始重复这个过程（如果有多个最右节点为span的话）。在某条CSS规则下（比如.mod-nav h3 span），会形成一条符合规则的索引树，树由上至下的节点是规则中从右向左的一个个选择符匹配的节点。很明显，两种匹配规则的性能差别很大。之所以会差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；而从左向右的匹配规则的性能都浪费在了失败的查找上面