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

Question

这非常简单。

我有以下HTML结构：

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

和麻烦制造者CSS：

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

这是JSFiddle。

为什么最后一个ul＃myContactList＆gt; li不是li：nth-​​child（odd）的目标？

提前致谢，欢呼！ ：）

Answer 1

它是针对它的，但是您在最后一个列表项中没有清除浮动的问题。请参阅http://jsfiddle.net/ekXjy/4/（特别是CSS的第20行，它会为每个列表项生成一个新的浮点上下文）。

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

明确：你对ul＃myContactList＆gt; li＆gt; ul都清除了最后一个列表项之前的浮点数，但没有清除最后一项中的浮点数。使用overflow：hidden为每个列表项提供自己的块上下文修复。