标签：
css选择器的匹配规则是从右向左。和常规思维不同。
css选择器限制个数最好不超过4层。
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）
根据以上「选择器匹配」与「选择器执行效率」原则，我们可以通过避免不恰当的使用，提升 CSS 选择器性能。
1、避免使用通用选择器
.content * {color: red;}
浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 content 的元素，直到文档的根节点。因此其匹配开销是非常大的，所以应避免使用关键选择器是通配选择器的情况。
2、避免使用标签或 class 选择器限制 id 选择器
BAD button#backButton {…} BAD .menu-left#newMenuIcon {…} GOOD #backButton {…} GOOD #newMenuIcon {…}
3、避免使用标签限制 class 选择器
BAD treecell.indented {…} GOOD .treecell-indented {…} BEST .hierarchy-deep {…}
4、避免使用多层标签选择器。使用 class 选择器替换，减少css查找
BAD treeitem[mailfolder="true"] > treerow > treecell {…} GOOD .treecell-mailfolder {…}
5、避免使用子选择器
BAD treehead treerow treecell {…} BETTER, BUT STILL BAD treehead > treerow > treecell {…} GOOD .treecell-header {…}
6、使用继承
BAD #bookmarkMenuItem > .menu-left { list-style-image: url(blah) } GOOD #bookmarkMenuItem { list-style-image: url(blah) }
标签：
原文地址：http://www.cnblogs.com/byronvis/p/5384152.html
