.something的表现：作为选择者的第一个孩子？

Question

以下选择器是否可能存在性能问题？

.div-class :first-child {
  margin-top: 20px;
}

我读过在另一个选择器中使用*选择器很慢。据推测，上述内容实际上与此相同？

.div-class *:first-child {
  margin-top: 20px;
}

这是一个移动网站，我的图像会夸大任何问题。

更新 - 我想我一直不清楚我在问什么。我想知道这些选择器是否对性能不利？

Answer 1

是的，它们功能相同。添加*字符本身的成本几乎为零，因为您只是明确指定了其他方面暗示的内容。

至于*:first-child是否缓慢，没有明确的答案 - 它不仅取决于你的布局，还取决于你控制之外的外部因素，包括硬件功能和浏览器实现。您最好的选择是尽可能运行自己的基准测试。

就个人而言，我会避免担心它，直到我能确定它是瓶颈发生的地方。

我可以建议的一件事（但不能保证会有所帮助）是，如果.div-class只有一个级别的后代，你可以用直接后代组合子替换后代组合子：

.div-class > :first-child {
  margin-top: 20px;
}

这限制了对直接祖先的查找，因此浏览器只需要决定每个第一个孩子的父亲是否.div-class，并且不必继续查看更多的祖先。这将有助于完全超出任何.div-class层次结构的元素。

同样，这假定了后代和子组合器的天真实现，因此我不能保证它实际上会提高渲染性能。但是，根据您的布局，可能值得一试。