:last-child伪类混淆

Question

在这个JSFiddle中,最后一个.tab类没有得到正确的border-radius效果(右上角的圆角).

我认为我的逻辑是正确:last-child的.tab,.tabbed在这种情况下选择最后一个.

我究竟做错了什么？

CSS:

body {
    background: black;
    color: white;
    padding: 5px; }

.tabbed {
    height: 550px;
}

.tabbed .tab {
    padding: 6px 14px;
    background: rgba(255,255,255,0.25);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 0px;
    border-left-width: 0;
    float: left;
}

.tabbed .tab:first-child {
    border-radius: 3px 0 0 0;
    border-left-width: 1px;
}

.tabbed .tab:last-child {
    border-radius: 0 3px 0 0;
}

HTML:

<ul class='tabbed'>
    <li class='tab'>Menu 1</li>
    <li class='tab'>Menu 2</li>
    <li class='tab'>Menu 3</li>
    <li class='tab'>Menu 4</li>
    <li class='tab'>Menu 5</li>
    <li> <br/><br/> </li>
    <li class='dummy'>Content 1</li>
    <li class='dummy'>Content 2</li>
    <li class='dummy'>Content 3</li>
    <li class='dummy'>Content 4</li>
    <li class='dummy'>Content 5</li>
</ul>

Answer 1

根据这个文件:

:first-child伪类表示"如果此元素是其父元素的第一个子元素".:last-child表示"如果此元素是其父元素的最后一个子元素".请注意,只有元素节点(HTML标记)计数,这些伪类忽略文本节点.

另见W3C doc

它不适用于您的情况,因为最后一个.tab不是父ul的最后一个子节点.

如果您创建两个列表,则按预期应用css.