CSS多个子选择器vs单标签选择器性能

理论上CSS子选择器比标签选择器更高效。但是当你有一个类时你会发生什么，你需要在这个类元素里面定义一个特定的标签，但他们不是一级的孩子？CSS多个子选择器vs单标签选择器性能

让我们看一个例子：

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

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

哪一个是更好的CSS性能的做法？

“但是当你有一个班级，你需要在这个班级元素里面设置一个特定的标签但是他们不是一个一级孩子时会发生什么？”然后表现变得完全不相关。 – BoltClock

CSS由解释器从右向左读取，较短的选择器===更多的性能。 –

~~每MDN：避免后代选择〜~~

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

如果你认为它通过在逻辑上，与后代选择，在CSS引擎将检查父元素的每个孩子（在这种情况下.styled-table）寻找匹配（在这种情况下td标签），然后将每个这些孩子的孩子等等。

然而，使用一个子选择器，您正在告诉引擎确切要找出匹配的“路径”。如果它在路径中的任何点无法找到匹配项（例如，如果您的.styled-table没有tbody作为其直接子项），那么它将放弃选择器。

2016-04-27 15:30:12 Shaggy

您发布到MDN文档报告的链接还指出，这些准则是在2000年编写的，并且可能不再与现代浏览器相关。 – fbid

糟糕，我知道，但当它在Google上弹出时，它的日期为2016年1月15日，所以我认为它已更新。多一点谷歌搜索显示，相对于其他选择器，两个选择器的性能仍然很差，并且子选择器比后代选择器执行得更好。 – Shaggy

回答