选择器优化
现在我们知道了选择器有很多种，但是对于浏览器来说，解析每种选择器所耗费的时间并不是一样的。所以当我们使用选择器的时候也有必要了解如何才能写出最优选择器。
选择器效率
根据网站效率专家 Steve Souders 指出，各种 CSS 选择器的效率由高至低排序如下
- id选择器（#myid）
- 类选择器（.myclassname）
- 标签选择器（div,h1,p）
- 相邻选择器（h1 + p）
- 子选择器（ul > li）
- 后代选择器（li a）
- 通配符选择器（*）
- 属性选择器（a[rel="external"]）
- 伪类选择器（a:hover,li:nth-child）
以下面的 p 元素为例：
<p id="test" class="red">我用来测试选择器的优化</p> 我们可以通过很多种方法去选中它，如p，.red，#test，[class="red"]等等。但是如果按照执行效率来说，id选择器是最佳的，其次是类选择器，然后是元素选择，最后才是属性选择器。
选择器解读顺序
一般来说，在具体的项目中，HTML 结构都比较复杂，所以关系选择器使用非常的普遍。对于关系选择器来说，我们的阅读习惯是从左到右，但是浏览器解读选择器，遵循的原则是从选择器的右边到左边读取。
如对于选择器.list .item .item-tt，浏览器先找的是.item-tt，然后继续向父级元素寻找.item，再找.list，这样才完成了最终的选择器匹配。
所以如果路径链越短，效率也就相应有所提高。这里建议选择器的层级最多不要超过4层，如.demo .list .item .item-tt .tt-link就有5层了，可根据实际情况考虑缩短为4层以内，如.demo .item-tt .tt-link