孩子和后代选择者之间的表现有差异吗？

Question

我可以使用子组合器编写CSS选择器,>或者只是指示任何后代的空格.例如,我有这个HTML代码:

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

我可以用以下两种方式编写CSS代码:

#test > a {
    ...
}

要么

#test a {
    ...
}

编写以下CSS代码的最佳方法是什么？

Answer 1

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

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

我没有做任何测试,但我希望检查所有祖先比只检查父级要慢.

所以可能#test > a更快.

同意你的结论.更不用说选择器实际上*做了不同的事情*,所以这种比较并不总是必要的.此外,对于大多数网页而言,性能差异可以忽略不计.您必须处理数千个元素才能注意到性能差异.在现实世界中,没有人抱怨选择器性能.但这是会议和博客的共同主题. (3认同)