css选择器优化指南

css选择器的解析是从右往左的,比如#div a并不是先查找id为div的元素,然后再找里面的a元素。而是首先在页面中找所有的a,再看每一个a有没有一个id为div的祖先元素。

所以,为了优化页面,需要写出高效的css选择器。

选择器效率

各种 CSS 选择器的效率由高至低排序如下:

  • id选择器(#myid)
  • 类选择器(.myclassname)
  • 标签选择器(div,h1,p)
  • 相邻选择器(h1 + p)
  • 子选择器(ul > li)
  • 后代选择器(li a)
  • 通配符选择器(*)
  • 属性选择器(a[rel="external"])
  • 伪类选择器(a:hover,li:nth-child)

优化方法

  1. 不要使用通用选择器
  2. 不要限制id,class选择器。比如不要写div#box这样的代码
  3. 层级尽量减短
  4. 避免使用子选择器
  5. 使用继承

发表评论

电子邮件地址不会被公开。 必填项已用*标注