才发现css选择器方面也存在性能优化问题，用好css选择器也是有讲究的，我们要学会 规则过滤。今天想要写一下css选择器方面的性能优化问题。
浏览器对选择器的读取
首先，我们要了解浏览器读取我们书写的选择器时遵循的原则– 从右向左进行读取。选择器最右边的部分被称为 关键选择器，它决定了选择器的效率如何。对于一个给定的元素，需要匹配的规则越少，样式的解析就会越快，性能就会有所提升。这里，还有一个规则– 越具体的关键选择器，其性能越高。那么如何判断选择器的性能高低呢？？？请接着往下看 ~ ~ ~
css选择器的效率
关于css选择器有一个固有的效率，如下所示:
- id选择器(#container)
- 类选择器(.msg)
- 标签选择器(p,span)
- 相邻选择器(h1+p)
- 子选择器(ul>li)
- 后代选择器(li a)
- 通配符选择器(*)
- 属性选择器(input[type=”email”])
- 伪类选择器(a:hover)
从上面的排序我们就可以看出，id选择器的效率最高，伪类选择器的效率最低。虽然CSS3伪类选择器和属性选择器使用十分方便，但是效率却最低。
使用建议
这里有几点CSS选择器的使用建议，大家可以参考一下:
- 避免普遍规则
- 不在id选择器前加标签名和类名
- 不在类名选择器前加标签名
- 尽可能使用具体的类别
- 避免使用后代选择器
- 标签分类规则中不应该包含一个子选择器
- 子选择器的问题
- 借助相关继承关系
- 使用范围内的样式表
这里我想强调一点，后代选择器是 CSS 中性能耗用最大的选择器。 它是性能开销相当大的——特别是当选择器在标签或通用类别中。所以需要格外注意尽量减少后代选择器的使用。
每一条建议后面都有大大的小技巧，如果大家不是很清楚，可以点击 这里
小结
个人感觉，对CSS选择器使用进行优化的时候，尽量避免多层嵌套(建议不要大于3层)，选择器前面不要出现多余的标签名，选择器使用尽量具体化 ~ ~ 不知道这篇文章对于你的学习是否有所帮助，大家快快优化自己的CSS吧 ~
参考文章