CSS 选择器 :nth-child(even) 与 jQuery( ":even" )

Posted 2023-03-06

【中文标题】CSS 选择器 :nth-child(even) 与 jQuery( ":even" )

【英文标题】：CSS selector :nth-child(even) Vs jQuery( ":even" )

【发布时间】：2014-12-17 14:28:15

【问题描述】：

jQuery 选择 first row 为 even（基于 0），而 CSS 选择 second row 为 even（基于 1）。 是的，jQuery documentation 在附加说明中明确提到它是一个扩展，而不是 CSS 的一部分 -

因为 :even 是一个 jQuery 扩展，而不是 CSS 的一部分 规范，使用 :even 的查询不能利用 本机 DOM querySelectorAll() 提供的性能提升 方法。使用 :even 选择时达到最佳性能 元素，首先使用纯 CSS 选择器选择元素，然后 使用 .filter(":even")。

但是在决定什么是偶数和什么是奇数时，它们不应该是相同的吗？为什么会出现混乱？

$('ul li').filter(':even').text('jQuery Even')

li 
  color: blue;

li:nth-child(even) 
  color: red;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul>
  <li>CSS Odd</li>
  <li>CSS Even</li>
  <li>CSS Odd</li>
  <li>CSS Even</li>
  <li>CSS Even</li>
</ul>

【问题讨论】：

您已经确定了差异：从零开始计数和从一开始计数。要使它们匹配，只需使用 css 的 :nth-child(even) 作为 jQuery 选择器。

@DavidThomas 感谢您的回复。您有任何参考资料说明了保持这种差异的原因。

【参考方案1】：

即使在文档中，也指出行为counter-intuitively, :even selects the first element, third element, and so on within the matched set.

由于我认为这种行为没有任何技术原因（除了索引是偶数），因此就“为什么以这种方式设计”而言，这实际上更像是一个“为什么”的问题。对于创建它的人来说，也许它更容易或更直观。 :nth-child(even) 是 CSS3 选择器模块规范的一部分，到目前为止，它是 Recommendation，但在 jQuery 1.0（2006 年引入 :even 时）仍然是候选推荐。

至于为什么它仍然是 jQuery 中的行为，这可能是为了反向兼容，因为修改行为可能会破坏所有依赖旧行为的现有网站和代码。

【讨论】：

与我的口味并不完全相反，计算中类数组元素的索引往往以 0 开头，这是一个偶数。