CSS选择器

选择器是匹配元素的一种模式，不只是在CSS中，JavaScript对CSS的选择器也是支持的，比如document.document.querySelectorAll。

关于CSS解析器

HTML 经过解析生成 DOM Tree（这个我们比较熟悉）；而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。

Render Tree 中的元素（WebKit 中称为「renderers」，Firefox 下为「frames」）与 DOM 元素相对应，但非一一对应：一个 DOM 元素可能会对应多个 renderer，如文本折行后，不同的「行」会成为 render tree 种不同的 renderer。也有的 DOM 元素被 Render Tree 完全无视，比如 display:none 的元素。

在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 renderer。对于每个 DOM 元素，必须在所有 Style Rules 中找到符合的 selector 并将对应的规则进行合并。选择器的「解析」实际是在这里执行的，在遍历 DOM Tree 时，从 Style Rules 中去寻找对应的 selector。

解析顺序

CSS匹配不是从左到右进行查找，而是从右到左进行查找。如果从左到右的顺序，那么每条选择器都需要遍历整个DOM树，性能很受影响。所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找, 所以选择器最好写的简洁一点。

选择器权重

权重，也就是选择器的优先级，每条选择器的规则都有其权重，权重大的会覆盖掉权重小的，很多CSS出现问题的场景，都是某处定义了一个更高权重的规则，导致此处规则不生效。

根据样式所在位置，对元素的影响也有关系：内联样式（标签内style形式） > style标签 > link标签。

另外一点需要注意的是!improtant,凡是属性值后加上了!important，那么它的值不会被其他值替换。

权重的计算

通过这篇文章你应该知道的一些事情——CSS权重。了解下权重的计算，主要的规则就是:

id选择器 > 类，属性选择器和伪类选择器 > 元素和伪元素

基本选择器

• 通配符选择器（＊）
• id选择器（\#ID）
• 类选择器（.className）
• 元素选择器(E)
• 后代选择器（Ｅ Ｆ）
• 子元素选择器(E>F)
• 相邻兄弟元素选择器(E + F)
• 群组选择器（selector1,selector2,...,selectorN）

属性选择器

使用CSS3属性选择器，你可以只指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。

• E[attr]：只使用属性名，但没有确定任何属性值
• E[attr="value"]：指定属性名，并指定了该属性的属性值
• E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
• E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
• E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
• E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
• E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

伪类选择器

伪类选择器的形式就是:xxx， 比如:hover, :link, :nth。

动态伪类

这些伪类并不存在于HTML中,而只有当用户和网站交互的时候才能体现出来，动态伪类包含两种，第一种是我们在链接中常看到的锚点伪类，如":link",":visited";另外一种被称作用户行为伪类，如“:hover”,":active"和":focus"。先来看最常见的锚点伪类。

• hover: 用于当用户把鼠标移动到元素上面时的效果
• active: 用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了）
• focus: 用于元素成为焦点，这个经常用在表单元素上

UI元素状态伪类

主要是针对于HTML中的Form元素操作, IE8不支持":checked",":enabled",":disabled"这三种选择器。

CSS3的:nth选择器

主要注意的是CSS3添加的nth选择器在IE8下不支持。

• fist-child: 选择某个元素的第一个子元素；
• last-child: 选择某个元素的最后一个子元素；
• nth-child(): 选择某个元素的一个或多个特定的子元素；
• 其他： 常用的就是上面三种了，其他自行了解。

选择器分类总结

见图:

选择器兼容性

选择器的兼容性:

选择器的优化

• CSS选择器的优化

参考资料

• 一个CSS选择器游戏
• CSS选择器支持情况
• CSS选择器文档
• CSS3 选择器——基本选择器
• CSS3 选择器——属性选择器
• CSS3 选择器——伪类选择器
• CSS SELECTORS AND PSEUDO SELECTORS BROWSER COMPATIBILITY
• Browser CSS-Selector-Test