jQuery :odd 和 :nth-child CSS3 不同

Posted 2023-03-06

【中文标题】jQuery :odd 和 :nth-child CSS3 不同

【英文标题】：jQuery :odd and :nth-child CSS3 different

【发布时间】：2012-04-20 03:44:09

【问题描述】：

我发现 jQuery :odd 选择器和 CSS3 nth-child(odd) 的工作方式不同。 http://jsfiddle.net/TMDwT/5/

黄色是 CSS nth-child(odd) 如果你取消注释 JS 和注释 background: yellow in CSS 你会发现它以另一种方式找到。

谁能说说我是如何通过 CSS3 实现与 jQuery 相同的结果的？

谢谢！

【问题讨论】：

您的嵌套列表格式不正确。 li 元素必须是 menu、ol 或 ul 元素的子元素。

对不起，已修复。但问题依然存在。 jsfiddle.net/TMDwT/5

在 jQuery 中使用 nth-child(odd) 怎么样？

@Hexxagonal: jQuery 的:nth-child() 是CSS3 的副本，所以不会有任何区别。

@BoltClock 这就是我的意思......他想知道如何在 jQuery 和 CSS 中实现相同的结果

【参考方案1】：

是的，:odd 和 :nth-child(odd) 不是一回事：

:odd 匹配匹配元素中的奇数项，即您应用选择器的 jQuery 对象的内容，

:nth-child(odd) 匹配其各自父项中的奇数项。

这与:first 和:first-child 或:last 和:last-child 之间的区别相同。

更新： 正如 zzzzBov 和 BoltClock 正确指出的那样，:odd 选择器是从零开始的，而 :nth-child() 选择器是从一开始的。这意味着即使您将两个选择器应用于元素的完整子列表（从而消除了:odd 和:nth-child(odd) 之间的差异），它们仍然不会匹配相同的元素。

【讨论】：

以及“我可以在 CSS3 中做到这一点吗？”的答案。是没有。

别忘了提到:odd 使用从0 开始的索引，而:nth-child 使用从1 开始的索引。这意味着在单个列表中，它们仍然不会代表相同的选择。

@zzzzBov，绝对是，但发问者明确指的是:nth-child(odd)，因此在这种特殊情况下，基于一个并不是真正的问题:)

@Alex，CSS 选择器没有当前匹配的元素的概念，所以:odd 那里没有等价物。

@Frédéric Hamidi：实际上，这很重要。它们索引的差异正是奇数和偶数关键字表现不同的原因。