CSS选择器的优化

学习笔记

CSS选择器是从右到左进行规则匹配。了解这个机制后，例子中看似高效的选择器在实际中的匹配开销是很高的，

Google 资深web开发工程师 Steve Souders 对 CSS 选择器的执行效率从高到低做了一个排序：

1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.子选择器（ul < li）
6.后代选择器（li a）
7.通配符选择器（*）
8.属性选择器（a[rel="external"]）
9.伪类选择器（a:hover, li:nth-child）

1、避免使用通用选择器

2、避免使用标签或 class 选择器限制 id 选择器

3、避免使用标签限制 class 选择器

4、避免使用多层标签选择器。使用 class 选择器替换，减少css查找

5、避免使用子选择器

6、使用继承