使用:last-child选择器会影响网页性能吗？

Question

我经常使用:last-child选择器，主要是在列表中使用border: none;来为最后一个子元素设置border-bottom，或者在使用边距时。所以我的问题是，从性能角度来看，:last-child选择器是否不好？

此外，我听说它被从CSS2规范中删除，因为使用:first-child很容易让浏览器检测到，但要检测:last-child则需要回路检查。

- Mr. Alien

---

如果 :last-child 只是用于从列表的最后一个子元素中删除底部边框，您可以添加顶部边框并从 first:child 中删除它。当然，这可能不符合您的要求。 - micadelli

@t.niese：CSS4 可能会引入父选择器，:last-child 也在规范中（但是实现可能会像文章所示存在性能问题）。 - Paweł Bulwan

@buli，这更多是关于“为什么 IE 花了这么长时间才支持:last-child”的部分。 - t.niese

@t.niese 我只是一般性地在说 :) - Mr. Alien

@Mr.Alien 我也是。还有一些信息：Firefox将最后加载的元素视为最后一个元素，直到它获得新元素。 在Safari、Chrome和Opera中[...]这些浏览器不会将任何元素视为最后一个元素，直到关闭父元素。只是想到这个观察可能会引起兴趣，为什么会有关于性能问题的担忧。无论如何，我认为这不是一个真正的问题，因为如果你看一下动态页面，js一遍又一遍地创建和删除元素。我不认为:last-child会成为问题所在。 - t.niese

Answer 1

如果由于性能问题而推迟了CSS2中的选择器，但在Selectors 3中重新引入，我认为这是因为之前的性能问题已经不存在了。

请记住，:last-child 是选择父元素的最后一个子元素的明确且唯一的方法（除了显然的 :nth-last-child(1)）。如果浏览器实现者不再担心性能问题，作为作者的我们也不应该再担心。

我能想到的唯一令人信服的使用:first-child 覆盖边框样式而非:last-child 的原因是为兼容IE7和IE8。如果那有助于提高性能，那就让它成为一个副作用。如果您不需要支持IE7和IE8，则不应该感到被迫使用:first-child 而非:last-child。即使浏览器性能绝对关键，您也应该通过测试和基准测试来解决它，而不是过早地进行优化。

- BoltClock

---

如果您可以控制服务器上页面的呈现，则 last-child 不是选择另一个元素的最后一个子元素的唯一方法。您可以添加一个类并使用该类进行选择。 - andrewb

Answer 2

通常，核心CSS选择器的性能表现足够好，大多数人不必担心使用它们。是的，其中一些选择器的性能表现可能较差，但即使是最性能最差的选择器，也不太可能成为您网站的主要瓶颈。

除非您已经将其他所有内容都优化到完美状态，否则我建议不要担心这个问题。使用像YSlow这样的分析工具来查找您网站上的真正性能问题，并修复它们。

无论如何，即使对于给定的CSS选择器（或任何其他浏览器功能）存在明显的性能影响，我认为解决这个问题是浏览器制造商的责任，而不是您需要绕过它。

- Spudley

Answer 3

我相信这仍然是获取最后一个子元素的最简单、低性能的方法。 我的意思是，所有其他获取最后一个子元素的方法在性能上都会更差，因为它们没有经过W3C社区的任何工作。

- wazaminator

---

不，但由于它是规范中的一个特性，并且因为W3C将其作为完全文档化的选择器，我们只能假设他们对其进行了工作。 - wazaminator

规范和实现是两回事。选择器是否正式成为CSS规范的一部分并不重要。仅仅声称没有问题，因为一群人考虑了它应该做什么，并不是一个非常有力的论据。 - Felix Kling

问题中的这群人基本上制定了互联网编程的所有规则，其中一些人正在设计浏览器。我相信，如果他们选择按照现有方式实施last-child，肯定有理由，因为审阅CSS在他们的浏览器中也是他们的工作。 - wazaminator

@Felix Kling：它们密切相关 - 如果可互操作的实现太少，规范确实会放弃或延迟功能，这似乎就是“:last-child”发生的情况。 话虽如此，您最后的陈述仍然成立 - 尤其是当没有参考资料支持这样的说法时。 - BoltClock