如果我选择它 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
)?还有什么需要考虑的吗?
最佳答案
谁知道?您必须能够访问您感兴趣的任何浏览器引擎的源代码,如果它因浏览器而异,我不会感到惊讶——这是一个非常低级的实现细节。即使您确实可以访问源代码,除非您是浏览器开发人员,否则这些信息对您也没有用处。
在浏览器兼容性方面,它们完全相同。 Internet Explorer 8 根本不支持 :nth-last-child()
。并且没有任何浏览器的已知版本支持 :nth-child()
或 :nth-last-child()
但不支持两者。
如果您需要 IE8 支持,this technique 将让您在不使用 :nth-child()
或 :nth-last-child()
的情况下匹配第 4 个 div 之后的每个 div — 唯一使用的 CSS3 选择器是 ~
组合器,IE8 确实支持:
div:first-child + div + div + div ~ div
这假设您正好有 10 个 div,但是您建议的两个选择器也是如此。
好吧,即使你可以保证只会有 10 个 div,不多不少,也没有其他 child ,
div:nth-last-child(-n+6)
仍然更有意义,因为它完全符合描述的内容:“匹配最后 6 个”。 div:nth-child(4) ~ div
并不明显,因为它真正说的是“匹配第 4 个之后的任何 div”。碰巧碰巧捡到了其中的 6 个。如果这很重要,它的特异性也较低。
关于css - 我必须从 10 个 div 中选择最后 6 个 div。我应该选择 "from behind"还是 "from the front"?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39803984/