CSS为什么最后一个li不被li：nth-​​child（odd）或li：nth-​​child（even）定位？

Question

This is pretty straightforward.

I have the following HTML structure:

<ul id="myContactList">
    <li>
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
        </ul>
    </li>
    ...
</ul>

and the trouble maker CSS:

ul#myContactList>li>ul>li {
    float:left; /* Trouble maker */
}

Here's the JSFiddle .

Why isn't the last ul#myContactList>li being targeted by li:nth-child(odd)?

Thanks in advance, cheers! :)

Answer 1

It is targeting it, but you have an issue with the floats not being cleared in the last list item. See http://jsfiddle.net/ekXjy/4/ (specifically line 20 of the CSS, which causes a new float context for each list item).

ul#myContactList>li>ul {
    list-style-type:none;
    padding:0;
    overflow: hidden; /* New style, to clear the floats contained within */
}

The clear:both you had for ul#myContactList>li>ul clears the floats for the list items preceding the last one, but nothing cleared the floats in the last item. Using overflow:hidden to give each list item its own block context fixes that.