CSS选择器优化

首先我们要知道,CSS选择器的解析是从右往左的,例如

div p a .box

首先查找的是页面中class为box的元素,再分别查找为a的元素、为p的元素。。。

关键选择器:

因此最重要的就是最右边的选择器,称为关键选择器

css选择器的效率排序:

内联样式 > ID选择器 > 类选择器 > 标签选择器 > 相邻选择器 > 子选择器 > 后代选择器 > 通配符选择器 > 属性选择器 > 伪类选择器

从以上可以看出,ID选择器和类选择器的效率最高,而属性选择器和伪类选择器虽然很好用,但是效率最低

CSS选择器优化

  • 尽量使用具体的ID和类选择器
  • 不要在ID选择器前加标签名
  • 不要在类选择器前加标签名
  • 避免使用后代、子代选择器
  • 避免使用通配符选择器
  • 将多层标签选择器改为类选择器,减少查找时间
  • 避免单规则的属性选择器
  • 避免类正则的属性选择器
  • 删除无用的选择器
posted @ 2020-04-30 16:20  ashen1999  阅读(244)  评论(0编辑  收藏  举报