在学习jQUery的时候遇到了遇到一个挺坑人的东西,或者说是由于我看文档不仔细引发的血案

首先是这样一段html,我想分别用oddnth-child(odd)选择器选择其中的某些 li

<div class="test-selector">
    <ul class="test-lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
    <ol class="test-lang">
        <li class="lang-swift">Swift</li>
        <li class="lang-java">Java</li>
        <li class="lang-c">C</li>
    </ol>
</div>

我是这样写的
%8J$JKUHD_`LSH49ZM5OTHQ.png
结果是这样的
3Y3HNWC~`8MT{T9~0H2D5H0.png

不对呀!这个 :odd 选择器怎么选择了第2,4,6个元素呢?不应该是第1,3,5个吗
经过苦思冥想终于想明白了,odd 是从0开始记数,nth-child 是从1开始记数
后经查阅文档确实是这样,看文档还是要细心呀

nth-child selector

index: The index of each child to match, starting with 1, the string even or odd, or an equation ( eg. :nth-child(even), :nth-child(4n) )

:odd Selector

In particular, note that the 0-based indexing means that, counter-intuitively, :odd selects the second element, fourth element, and so on within the matched set.

标签: html, css

添加新评论