使用CSS子选择器会更快吗？

Question

如果我们想要定位段落中的链接,哪个选择器会更高效/更快？

p a

要么

p > a

Answer 1

第二个(非常)快一点.浏览器会反过来处理CSS,因此您的规则都会a在页面上的所有元素上进行测试.对于第二个规则,它只需要测试直接父级,而另一个则需要测试整个后代链.

在实践中,执行时间差异在统计上并不具有统计意义,直到您在页面上获得数万个这样的HTML行.

Answer 2

让我向您展示选择器的效率顺序,从最快到最慢,这是谷歌的一些结论:

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)

它可能不完全正确,并且不适合各种浏览器,但仍然可以参考此订单.希望能帮助到你!

要了解有关CSS性能的更多信息,请参阅:http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/