使用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＆gt; li）
6. 后代选择者（li a）
7. 明星选择者（*）
8. 属性选择器（a [rel =＆＃34; external＆＃34;]）
9. 伪类选择器（a：hover，li：nth-​​child）

它可能不完全正确，并且不适用于各种浏览器，但此订单仍可供参考。希望它有所帮助！

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