css 选择器性能的取舍。和大量标签带有都是class

转载自：https://segmentfault.com/q/1010000003749652

近期刚好在整理选择器性能相关的知识点，内容如下：

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

id选择器（#id）

类选择器（.className）

标签选择器（div,h1,p）

相邻选择器（h1+p）

子选择器（ul > li）

后代选择器（li a）

通配符选择器（*）

属性选择器（a[rel="external"]）

伪类选择器（a:hover,li:nth-child）

决定选择器性能的几个点：

首先选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间，所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器。

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

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

最后回答你的问题：

1、class和id选择器性能最好，其他选择器我看网上说建议不要用

虽然id选择器的性能最好，但是因为一个页面内不能出现相同的ID，所以也不可常用。那么最常用的应该就是class类选择器，但是遇到li、td、dd等经常大量连续出现的元素，应该采用class类选择器结合后代选择器进行选择，如.nav > li，而不是在每一个元素上引用class类。

2、那么这样的话html文档就会有大量的带有class标签了

页面中出现大量的class类是最麻烦的，不仅难以维护，而且复用性是最差的，最头疼的还时常因为选择器优先级问题导致定义的属性值失效，所以这种做法没有任何意义，既没有提高性能，也会造成很多麻烦。

3、对于大量的带有class标签 和 选择器性能比起来。怎么取舍呢?大量class标签会也会影响性能吗？

不要太在乎选择器性能，请根据上述的选择器性能优化的方向，大胆灵活运用所有的选择器，多了解CSS的特性，慢慢你的CSS代码就不会被这些问题所困扰了。