如果我选择它from behind, 它会是
div:nth-last-child(-n+6) { background: #ff0000; }
如果我这样做from the front，那就是
div:nth-child(4) ~ div { background: #ff0000; }
两者产生相同的结果。
我应该选择哪个？
在内存使用方面，哪个在浏览器上更重 - 后者更重，因为它必须找到第 4 个之后的每个 div？
在浏览器兼容性方面，哪个支持更多——后者have more browser supports（IE8仅部分支持:nth-last-child）？
还有什么要考虑的吗？
【问题讨论】：
标签： css css-selectors
在内存使用方面，哪个在浏览器上更重 - 后者更重，因为它必须找到第 4 个之后的每个 div？
谁知道？您必须有权访问您感兴趣的任何浏览器引擎的源代码，如果它在不同浏览器之间存在差异，我不会感到惊讶——这是一个极低级别的实现细节。即使您确实可以访问源代码，除非您是浏览器开发人员，否则这些信息对您也没有用处。
在浏览器兼容性方面，哪个支持更多——后者是否支持更多浏览器（IE8仅部分支持
:nth-last-child）？
在浏览器兼容性方面，它们完全相同。 Internet Explorer 8 根本不支持:nth-last-child()。并且没有任何浏览器的已知版本支持:nth-child() 或:nth-last-child()，但不能同时支持两者。
如果您需要 IE8 支持，this technique 将允许您匹配第 4 个之后的每个 div，而无需使用 :nth-child() 或 :nth-last-child() — 唯一使用的 CSS3 选择器是 ~ IE8 支持的组合器：
div:first-child + div + div + div ~ div
这假设您正好有 10 个 div，但是您建议的两个选择器也是如此。
我应该选择哪个？
好吧，即使你可以保证只有 10 个 div，不多也不少，也没有其他孩子，div:nth-last-child(-n+6) 仍然更有意义，因为它完全符合描述的内容：“匹配最后 6 个。” div:nth-child(4) ~ div 并不那么明显，因为它真正的意思是“匹配第 4 个之后的任何 div”。碰巧捡到了6个。
如果这很重要，它的特异性也较低。
【讨论】：
理论上，您的第一种方法（从后面）会“更快”，因为您不会像第二种方法那样在此处嵌套选择器。然而，在这种情况下，性能提升并不值得，浏览器足够“聪明”，可以为您优化它。
仔细考虑您的用例 - 它可以以何种方式发展 - 您真的要匹配最后 7 行还是先保留 3 行不同，如果扩展到 20 行等会发生什么...
经验法则 - 将您的代码可维护作为首要目标，仅在需要时进行优化，切勿过早进行优化，也不要考虑太多。完成你的工作并继续前进:)
【讨论】：