前端性能优化---选择器优化

　　1.id选择器肯定是最快，但是不要在ID选择器使用的同时再使用标签或类选择器了，这点上jquery也是一样的。
不要出现这样的写法 "div#content" 或者 "#content.text"。David Hyatt的第一段话中有说到了，样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。，而​在html中ID是唯一的，如果真的是用了 "div#content"，浏览器通过ID定位到了具体的元素，然后发现左侧还是标签选择器，那么就会继续匹配，继续查找元素，这样无疑损耗了浏览器的性能，影响了渲染时间。

　　2.​不要在类选择器时用标签选择器，这点跟jquery是刚好相反的。
不要出现这样的写法 "div.text"，从css的效率来看，类选择器（class）是比标签选择器要好，这样的写法只会增加了查找的难度，如果真的是根据标签来区分样式的话，考虑写不同的class。

　　3.​​如果明确dom结构，先使用子选择器，减少后代选择器使用，这点跟jquery的对比没有留意和实践，本人认为是相反的。
如果你的写法是这样 "div a"，而实际上div 跟 a 是父子关系，如果合适更建议是这么用 "div>a"，这样效率高一些，但是不是最好的方案，下面这一点的方案会更好一些。

　　4. ​ ​使用类选择器替代后代选择器和子选择器，这点上跟jquery是不一样的。
如果你的写法是这样 "div a" "div>a"，虽然前面建议用子选择器替换后代选择器，但是这两个的方式还是效率低，David Hyatt的第3段话：后代选择器在CSS中是最昂贵的选择器。贵得要命——尤其是把它和标签或通配符放在一起！​ ​毫无疑问，我们要想其他的方式来替换这种书写方式，那么可以考虑这样的写法：div对应的为".div-text" a对应的为".div-text-a"，从命名上来关联两者，在查看的时候逻辑也会清晰很多。
​
　　5. ​尽量使用继承来避免写重复的样式，这点与jquery没有关系了。
你可能会这样写 "#text{} #text>.span:{font-size:24px;} #text>​.a{font-size:24px;}" ，那么可以这么写".text{font-size:24px;}"，让下面的继承这个样式。

　　这些我对css选择器的一些看法，上面没有说到的就是通配符选择器（*）和属性选择器，这个其实才是最消耗性能的，因为是针对所有的元素，即便是配合其他的选择器来用也很耗性能。实际上的ID选择器使用的机会不是很高，因为Html中的ID是唯一的，不会有很多的ID。那么从上面的分析，可以得到这么一个规则：尽量使用类选择器(class)​，避免使用通配符选择器（*）​和属性选择器，后代选择器和子选择器也尽量避免。