css - 子选择器和后代选择器在性能上有区别吗？

Question

我可以使用子组合器 > 或仅使用表示任何后代的空格来编写 CSS 选择器。例如，我有这个 HTML 代码:

<span id='test'>
    <a href="#">Hello</a>
</span>

我可以通过以下两种方式编写我的 CSS 代码:

#test > a {
    ...
}

或

#test a {
    ...
}

关于性能，编写以下 CSS 代码的最佳方法是什么？

Answer 1

Browsers parse selectors from right to left .

然后，如果您使用 #test > a，对于页面中的每个 a 元素，浏览器都会检查其父元素是否有 id="test".

但是如果您使用#test a，对于页面中的每个a 元素，浏览器都会检查它的一些祖先是否有id="test"。文档中不应有很多这样的元素，因此浏览器可能必须检查每个 a 的所有祖先。

我没有做过任何测试，但我预计检查所有祖先比只检查父级要慢。

所以可能 #test > a 更快。​​