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

Question

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>

Answer 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 中的行为，这可能是为了反向兼容，因为修改行为可能会破坏所有依赖旧行为的现有网站和代码。