Question

在this JSFiddle中，上一个.tab课程没有获得正确的border-radius效果（右上角）。

我认为我的逻辑是正确的，在这种情况下，:last-child选择了.tab的{{1}}。

我做错了什么？

CSS：

.tabbed

HTML：

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;
}

Answer 1

根据documentation：

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

另见W3C doc

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

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

Answer 2

在评论中，你说：“它需要在同一个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;
}

请参阅this fiddle。

Answer 3

要展开Didier G.'s answer，您真正应该使用的是:first-of-type＆amp; :last-of-type伪选择器。但是，:nth-of-type选择器（及其类似的简写版本）似乎不支持使用类名进行搜索，仅选择，例如，以下将选择.tabbed的第一个孩子，当且仅当它具有班级.tab时：

.tabbed .tab:first-of-type

然而，这会选择.tabbed类型为li的第一个孩子：

.tabbed li:first-of-type

我找不到明确说明此行为的任何引用，但在specification中含糊其词：

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

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

您可以看到此行为live on JSFiddle。

Answer 4

Here's how i would do it：

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 -->

：last-child伪类混淆

4 个答案: