Css 某物的性能：第一个孩子作为选择器？

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

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

我读到在另一个选择器中使用*选择器速度很慢。想必上述情况实际上与此相同

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

这是一个手机网站，我的形象会夸大任何问题

---

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

是的，它们在功能上是等价的。添加

*

字符本身的成本应该几乎为零，因为您只是显式地指定了一些其他方面隐含的内容

至于

*：first child

是否慢，没有明确的答案-这不仅取决于您的布局，而且在很大程度上取决于您无法控制的外部因素，包括硬件功能和浏览器实现。您最好的选择是尽可能运行自己的基准测试

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

我可以建议（但不能保证它会有帮助）的一件事是，如果

.div class

将只有一个级别的子体，您可以用直接子体组合器替换子体组合器：

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

这将查找限制为直接祖先，因此浏览器只需确定每个第一个子级的父级是否为

.div class

，而不必继续查找其他祖先。这将有助于处理任何

.div类

层次结构之外的元素

---

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

我想*：第一个孩子会因为*而变慢，但是如果您只是针对任何项目的第一个孩子，应该很好。如果我没记错的话，过去变慢的是

*

加上直接后代选择器，就像这样：

.header>*

。“习惯于”，因为选择器性能显然不再是一个大问题，但是

布局

和

绘制

操作是。有关页面性能的更多信息，请访问Chromium's。@jdln：我不能肯定，这取决于很多因素，包括硬件和软件。你最好的选择是运行自己的基准测试。