编写高效的css选择器

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) }