css选择器性能情况

选择器效率从高到低的排序列表:

1. id选择器（#id）

2. 类选择器（.className）

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. 但是想用更快的选择器之前，还要了解选择器的匹配机制，事实上，浏览器读取选择器时，不是按照我们的阅读习惯从左到右，而是遵循的从选择器的右边到左边进行读取的。

3. 那么最右侧的选择器对于性能就起着关键性的作用，它是最先开始查找的，如果最右侧是#id选择器那么性能就很高，如果是标签选择器那么性能就会大打折扣。

最后：CSS性能并不是最重要的，其本身就是表现型语言，不像JS那样存在逻辑性会因为内存泄漏造成卡死现象。应该了解CSS的特性，灵活实现样式效果，使其在项目中代码易复用，易管理和维护。