CSS3选择器的性能比较

在众多CSS3选择器中，如何选择最合适的选择器一直是很揪心的问题。

A.Google
资深web开发工程师Steve Souders一句话就可以概括这个问题：
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和class，非必要时候尽量不要使用其它选择器

B.safari和webkit的架构师David
Hyatt的两句话：

样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。

（这和我们理解的从左往右选不一样，所以在写CSS时候，选择器不应超过三级。）

如果你非常在意页面的性能那千万别使用CSS3选择器。实际上，在所有浏览器中，用 class 和 id
来渲染，比那些使用同胞，后代选择器，子选择器（sibling, descendant and child
selectors）对页面性能的改善更值得关注。

From：http://blog.sina.com.cn/s/blog_45b53d4f0101gupo.html