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

Question

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

让我们看一个例子：

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

VS

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

其中哪些是更好的CSS性能练习？

Answer 1

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

  

后代选择器是CSS中最昂贵的选择器。 可怕昂贵 - 特别是如果选择器位于Tag或Universal中分类

如果您通过逻辑思考，使用后代选择器，CSS引擎将检查父元素的每个子元素（在本例中为.styled-table）查找匹配项（在本例中为td标记）然后是这些孩子的每个孩子，依此类推。

但是，使用子选择器，您可以准确地告诉引擎哪条＆＃34;路径＆＃34;寻找一场比赛。如果它未能在路径中的任何位置找到匹配项（例如，如果您的.styled-table没有tbody作为其直接子项之一），那么它将放弃选择器。