CSS选择器：nth-​​child（偶数）vs jQuery（＆＃34;：even＆＃34;）

Question

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

  

因为：甚至是jQuery扩展而不是CSS的一部分   规范，查询使用：甚至无法利用   本机DOM querySelectorAll（）提供的性能提升   方法。使用时达到最佳性能：甚至选择   元素，首先使用纯CSS选择器选择元素   使用.filter（＆＃34;：even＆＃34;）。

但他们在决定什么是偶数和什么是奇数时不应该是一样的？为什么混乱？

＆＃13;

＆＃13;

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

＆＃13;

li {
  color: blue;
}
li:nth-child(even) {
  color: red;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

由于我认为这种行为没有任何技术原因（除了索引之外），它实际上更像是一个＆＃34;为什么＆＃34;问题是＆＃34;为什么这样设计＆＃34;。也许创造它的人更容易或更直观。 :nth-child(even)是CSS3选择器模块规范的一部分，截至目前，该规范是Recommendation，但在jQuery 1.0时（2006年引入:even时）是仍然是候选人推荐。

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