理论上 CSS 子选择器比标签选择器更有效。但是当你有一个类并且你需要在这个类元素中设置特定标签的样式但它们不是一级子元素时会发生什么？
让我们看一个例子:
.styled-table > tbody > tr > td{
// Some cell styles
}
对比
.styled-table td{
// Some cell styles
}
以下哪个是更好的 CSS 性能实践？
最佳答案
根据 MDN : 避免后代选择器。~
The descendant selector is the most expensive selector in CSS. It is dreadfully expensive—especially if the selector is in the Tag or Universal Category.
如果您从逻辑上考虑清楚，使用后代选择器，CSS 引擎将检查父元素(在本例中为 .styled-table)的每个子元素以寻找匹配项(在本例中为td 标签)，然后是这些 child 的每个 child 等等。
但是，对于子选择器，您是在告诉引擎要遵循哪条“路径”来寻找匹配项。如果它在路径中的任何一点都找不到匹配项(例如，如果您的 .styled-table 没有 tbody 作为其直接子项之一)，那么它将放弃选择器。
关于CSS 多子选择器 vs 单标签选择器性能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36893684/