CSS选择器优先级及其性能优化

发表于

首先我们需要清楚，浏览器是如何读取选择器，以识别样式，并将相应的样式附于对应的HTML元素，达到美化页面的效果。Chris Coyier曾在《Efficiently Rendering CSS》一文中说过“浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行”。
比如说：

1
2
3
div.nav < ul li a[title]{
  /* */
}

上面的实例来说，浏览器首先会尝试在你的HTML标签中寻找“a[title]”元素，接着在匹配“li和ul”，最后在去匹配“div.nav”。这就是前成所主的“选择器从右到左的原则”。
选择器的最后一部分，也就是选择器的最右边（在这个例子中就是a[title]部分）部分被称为“关键选择器”，它将决定你的选择器的效率如何？是高还是低。
那么如何让关键选择器更有效，性能化更高呢？其实很简单，主要把握一点“越具体的关键选择器，其性能越高”
选择器有一个固有的效率，执行效率的顺序如下：

  1. id选择器（#myid）
  2. 类选择器（.myclassname）
  3. 标签选择器（div,h1,p）
  4. 相邻选择器（h1+p）
  5. 子选择器（ul < li）
  6. 后代选择器（li a）
  7. 通配符选择器(*)
  8. 属性选择器（a[rel=”external”]）
  9. 伪类选择器（a:hover,li:nth-child）

综合上面的顺序，我们清楚的知道，id和类名用于关键选择器上效率是最高的，而CSS3的仿伪类和属性选择器，虽然使用方便，但其效率却是最低的。
这个顺序跟选择器的优先级是有区别的：

  1. important声明 1,0,0,0
  2. ID选择器 0,1,0,0
  3. 类选择器 0,0,1,0
  4. 伪类选择器 0,0,1,0
  5. 属性选择器 0,0,1,0
  6. 标签选择器 0,0,0,1
  7. 伪元素选择器 0,0,0,1
  8. 通配符选择器 0,0,0,0