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

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作为其直接子项之一),那么它将放弃选择器.