li:nth-child(1)---div:nth-child(-n+2) 详解

我总是会有点奇葩的烦恼，如果看这个列子会更加明白

$("#box li:nth-child(1)").css("color", "red");

通俗的理解就是选择box 下面第一个li?后面自己写了一次，发现不对，ppp 下面的每个li 都被选中了

<div id="box">
      <ul>
        <li>John1</li>
        <li>Karl</li>
        <li>Brandon</li>
      </ul>
      <div id="ppp">
        <ul>
          <li>John2</li>
          <li>Karl</li>
          <li>Brandon</li>
        </ul>
        <ul>
          <li>Glen3</li>
          <li>Tane</li>
          <li>Ralph</li>
        </ul>
      </div>
</div>

:nth-child

概述

匹配其父元素下的第N个子或奇偶元素

':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)

 

所以会为每个 li 找到父元素，然后根据是否是第一个li 来展示颜色

jq手册地址：

http://hemin.cn/jq/nthChild.html