CSS选择器优化
首先我们要知道,CSS选择器的解析是从右往左的,例如
div p a .box
首先查找的是页面中class为box的元素,再分别查找为a的元素、为p的元素。。。
关键选择器:
因此最重要的就是最右边的选择器,称为关键选择器
css选择器的效率排序:
内联样式 > ID选择器 > 类选择器 > 标签选择器 > 相邻选择器 > 子选择器 > 后代选择器 > 通配符选择器 > 属性选择器 > 伪类选择器
从以上可以看出,ID选择器和类选择器的效率最高,而属性选择器和伪类选择器虽然很好用,但是效率最低
CSS选择器优化
- 尽量使用具体的ID和类选择器
- 不要在ID选择器前加标签名
- 不要在类选择器前加标签名
- 避免使用后代、子代选择器
- 避免使用通配符选择器
- 将多层标签选择器改为类选择器,减少查找时间
- 避免单规则的属性选择器
- 避免类正则的属性选择器
- 删除无用的选择器