html - 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>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 */
}

clear:both 你为 ul#myContactList>li>ul 清除了最后一项之前的列表项的浮动，但没有清除最后一项中的浮动。使用 overflow:hidden 为每个列表项提供其自己的块上下文可以解决此问题。