为什么最后一个li不是li:n -child(奇数)或li:n -child(偶数)的目标

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:n -child(奇数)的目标?

提前感谢，干杯!:)

Answer 1

它是针对它的，但是你有一个问题，在最后一个列表项中浮动没有被清除。参见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 */
}

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