html - CSS 为什么最后一个 li 没有被 li :nth-child(odd) or 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

它是针对它的，但是您遇到了最后一个列表项中未清除 float 的问题。参见 http://jsfiddle.net/ekXjy/4/ (特别是 CSS 的第 20 行，它为每个列表项创建一个新的 float 上下文)。

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 清除了最后一个列表项之前的 float ，但没有清除最后一个项中的 float 。使用 overflow:hidden 为每个列表项提供自己的 block 上下文可以解决这个问题。