Firefox 的 CSS3 “nth-child” 支持？答案

【问题标题】：Firefox's CSS3 "nth-child" support?Firefox 的 CSS3 “nth-child” 支持？
【发布时间】：2009-12-06 21:30:18
【问题描述】：

根据 css3.info 的 selector test，Firefox 3.0 支持 nth-child 选择器的一些排列。但是，here (#30) 显示的代码对我不起作用。

它应该选择空段落，所以我将我的代码编辑为以下，但它没有在 Firefox 中显示（它在 Opera 中有效）。

<style type="text/css">
div :nth-child(even) {
    background-color: yellow;
    height: 30px;
}
</style>

<div>
    <div>Does this element match?</div>
    <div></div>
    <div>Does this element match?</div>
    <div></div>
</div>

这是测试中的错误，还是我在某个地方出错了？

【问题讨论】：

标签： firefox css-selectors css

【解决方案1】：

嗯...根据this page Firefox 3.0 不支持:nth-child。

【讨论】：

已验证 - Safari 3 您的代码有效。 FF 3 没有。 div:nth-child(even) 和 div :nth-child(even) 之间也有区别
我刚刚测试了 3.0.8，这是 :nth-child() 的结果（88 个中有 47 个失败）。包括：nth-child(偶数)
但是，它确实通过了 div :nth-child(2n+0) {} 也选择了偶数。
经过我自己的一些测试，我认为他们的测试不起作用。我看到很多重复的测试，1 次通过，1 次失败。
我知道 Firefox 不正式支持 nth-child，这就是为什么我很惊讶其中一些测试显然通过了。我猜这个测试在某种程度上被打破了，因为 FF 似乎不支持任何形式的 nth-child。

【解决方案2】：

如果您使用 jquery this 可能会对您有所帮助（jquery 不在乎您的用户使用什么浏览器:)）

【讨论】：

【解决方案3】：

在 Firefox 3.5 中，您的测试用例现在可以按预期工作。

【讨论】：

是的，我正要说...我一直使用 nth-child 和 firefox 并且它有效。不过我用的是 3.5。
好吧，这个问题是在 Firefox 3.5 发布前 3 个月提出的……无论如何，这个问题更多的是关于为什么显然有一半的 nth-child 测试通过而一半没有。