4

在这个 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>
4

4 回答 4

5

根据此文档：

:first-child 伪类表示“如果此元素是其父元素的第一个子元素”。:last-child 表示“如果此元素是其父元素的最后一个子元素”。请注意，只有元素节点（HTML 标记）计算在内，这些伪类忽略文本节点。

另请参阅W3C 文档

它不适用于您的情况，因为最后一个.tab不是父 ul 的最后一个孩子。

如果您创建两个列表，则 css 将按预期应用。

于 2012-01-01T13:56:43.823 回答
3

在评论中，您声明：“它需要在同一个 ul 父级上。或者另一个 ul，在第一个 ul 的最后一个 li 之下。” 如果是这样，那么请执行以下操作：

<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>
    <ul>
    <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>
    </li>
</ul>

然后这个 css（使用现代浏览器）：

.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:nth-last-child(2) {
border-radius: 0 3px 0 0; }

.tabbed li:last-child {
   clear: left;
}

看到这个小提琴。

于 2012-01-01T16:33:23.333 回答
1

为了扩展Didier G. 的答案，您真正应该在这里使用的是:first-of-type&:last-of-type伪选择器。但是，:nth-of-type选择器（及其类似的速记版本）似乎不支持使用类名进行搜索，仅选择，例如以下将选择 的第一个孩子.tabbed，当且仅当它具有 class .tab：

.tabbed .tab:first-of-type

而这将选择.tabbed类型的第一个孩子li：

.tabbed li:first-of-type

我找不到任何明确说明此行为的参考资料，但规范中隐含了它：

:nth-of-type(an+b)伪类表示法表示具有an+b-1相同扩展元素名称的兄弟元素的元素

其中扩展元素名称是标签名称，不能是类或 ID 选择器。

您可以在 JSFiddle 上看到这种行为。

于 2012-01-01T14:06:50.437 回答
1

这是我将如何做到的：

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

.content {clear:both;}
.tall {
    height: 550px;
}

.tabbed .tab {
padding: 6px 14px;
background: rgba(255,255,255,0.25);
border: 1px solid rgba(255,255,255,0.4);
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; }

而且因为我认为在名为 的类中包含内容似乎不合适，因此tabbed将 HTML 更改为：

<div class="tall">
<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>
</ul>
<ul class="content">
    <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>
</div>
<hr/><!-- just here to show you the height remains -->
于 2012-01-01T17:12:35.763 回答