选择器优化

选择器优化

选择器效率

根据网站效率专家 Steve Souders 指出，各种 CSS 选择器的效率由高至低排序如下

• id选择器（#myid）
• 类选择器（.myclassname）
• 标签选择器（div,h1,p）
• 相邻选择器（h1 + p）
• 子选择器（ul > li）
• 后代选择器（li a）
• 通配符选择器（*）
• 属性选择器（a[rel="external"]）
• 伪类选择器（a:hover,li:nth-child）

选择器解读顺序

一般来说，在具体的项目中，HTML 结构都比较复杂，所以关系选择器使用非常的普遍。对于关系选择器来说，我们的阅读习惯是从左到右，但是浏览器解读选择器，遵循的原则是从选择器的右边到左边读取。

如对于选择器.list .item .item-tt，浏览器先找的是.item-tt，然后继续向父级元素寻找.item，再找.list，这样才完成了最终的选择器匹配。

所以如果路径链越短，效率也就相应有所提高。这里建议选择器的层级最多不要超过4层，如.demo .list .item .item-tt .tt-link就有5层了，可根据实际情况考虑缩短为4层以内，如.demo .item-tt .tt-link