如何使用带有jquery的nth-child()对每个第二个孩子应用css

Question

嗨,我想每隔2号申请一次 <li>

我试过了

<script>
$(document).ready(function(){
$('#cl li:nth-child(2)').css('color', 'red');    
})
</script>

HTML

<ul id="cl">
  <li>home</li>
  <li>home2</li>
  <li>home3</li>
  <li>home4</li>
  <li>home5</li>
  <li>home6</li>
</ul>

我可以使用此代码仅在第二个孩子上应用样式.我怎样才能在每个第二个孩子身上涂上风格

提前致谢 :)

Answer 1

使用:odd选择器:

$('#cl li:odd').css('color', 'red');

这是Jsfiddle:

你需要使用的原因:odd,而不是:even因为孩子是0指数的,含义<li>home</li>是第0个孩子,<li>home2</li>是这是奇怪的第一个孩子.

从文档引用:

特别要注意的是,基于0的索引意味着,反直觉地,:odd选择匹配集合中的第二个元素,第四个元素等.

奇怪的是,你需要使用odd选择器(双关语)