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

Question

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

让我们看一个例子：

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

VS

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

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

Answer 1

每MDN：避免后代选择〜

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

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

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