子选择器和后代选择器之间的性能是否存在差异？

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 可能更快。

Answer 2

请注意，两个选择器不会为您提供相同的输出！在您的示例中，确实如此。

但让我们检查下一个 HTML 代码，其中包含两个链接。

<div id="test">
    <p> lorum ipsum <a href="#">here</a> dolor </p>
    <a href="#">read more</a>
</div>

文本之间有一个链接，段落后面有一个链接，以允许用户阅读更多文本。 （例如在新闻网站上）。

如果你使用

#test a {
    ...
}

然后您将选择两个链接。

如果你使用

#test > a {
    ...
}

它只会选择#test的直接后代链接，即阅读更多链接！那是因为> 是child combinator。段落中的链接不会被选中。

下面是一个sn-p，向您展示不同之处。

#test a {
  color: red;
}
#test > a {
  font-weight: bold;
  font-size: 18px;
}

<div id="test">
  <p>lorum ipsum <a href="#">here</a> dolor</p>
  <a href="#">read more</a>
</div>

如您所见，第二个 CSS 规则只编辑了第一个子 <a> 元素（“阅读更多”链接）。

现在，回到您关于您的情况下的性能的问题：如果您在下一个 HTML 部分同时使用这两个选择器

<div id="test">
    <a href="#">Hello</a>
</div>

性能方面，这里是一样的。

--edit1：对上面句子的澄清--

当使用选择器时，它从右到左检查。在这种的情况下，body中有一个div，div里面有一个link元素，性能是一样的。这是因为当使用#test > a 时，它会检查所有链接以查看它的父级是否有id="test"。它不会进一步遍历树。

当使用#test a 时，它会检查链接元素的所有父元素（直到根），看看它是否有id="test"。由于在这种情况下在第一次父检查时已经找到了 div，因此它不必进一步遍历树。

但在其他情况下，当 div 不是文档中的唯一元素时，它当然会有所作为。您无法在此处比较差异，因为如前所述，结果不同。除非你确保给定的 div 下没有二级链接。那么>的使用当然更快了。

-- 结束编辑--

但是，如果这个人扩展了上述 div 的内容，他/她可能会遇到意想不到的 CSS 样式。

但要了解整体性能，这实际上取决于您希望通过 CSS（样式化所有链接还是仅设置第一级？）和div#tree 中的 DOM 树（树的深度？）。