CSS 多子选择器与单标签选择器性能答案

【问题标题】：CSS multiple child selectors vs single tag selector performanceCSS 多子选择器与单标签选择器性能
【发布时间】：2016-04-28 00:45:56
【问题描述】：

理论上 CSS 子选择器比标签选择器更有效。但是当你有一个类并且你需要在这个类元素中设置一个特定的标签但它们不是一级子元素时会发生什么？

我们来看一个例子：

.styled-table > tbody > tr > td{
    // Some cell styles
}

.styled-table td{
    // Some cell styles
}

以下哪一个是更好的 CSS 性能实践？

【问题讨论】：

【解决方案1】：

~~Per MDN：避免使用后代选择器。~~~

后代选择器是CSS中最昂贵的选择器。 可怕贵 - 特别是如果选择器在标签或通用类别中。
。

如果您从逻辑上考虑，使用后代选择器，CSS 引擎将检查父元素的每个子元素（在本例中为 .styled-table）寻找匹配项（在本例中为 td 标记），然后每个这些孩子的孩子等等。

但是，使用子选择器，您可以准确地告诉引擎要遵循哪个“路径”来查找匹配项。如果它无法在路径中的任何点找到匹配项（例如，如果您的 .styled-table 没有 tbody 作为其直接子项之一），那么它将放弃选择器。

【讨论】：

您发布到 MDN 文档的链接还报告说，这些指南是在 2000 年编写的，现在/可能不再与现代浏览器相关。
糟糕，我知道，但是当它出现在 Google 上时，它的日期是 2016 年 1 月 15 日，所以我认为它已经更新了。再多用谷歌搜索一下，确实可以发现两个选择器相对于其他选择器的性能仍然很差，而且子选择器的性能要好于后代选择器。
浏览器从右到左解析选择器，而不是从左到右。换句话说，他们向上检查每个孩子的父母。