css - 最后一个孩子选择了错误的 div

Question

在我的情况下，我很难:last-child上班。

HTML：

<div class="test">Some content</div>
<div class="test">Some content</div>
<div class="test">Some content</div>
<div class="action">Some other content</div>

CSS：

div.topic {
    border-bottom: 1px solid black;
}

div.topic:last-child {
    border-bottom: none;
}

JSFiddle

最后一个div.test仍然在底部有边框。​我认为的问题是border-bottom: none适用于最后一个 div，div.action而不是类测试的最后一个 div。

我该如何解决？

Answer 1

您必须更新您的标记才能获得所需的结果。将您的未知物品包装在包装器中，例如：

工作演示

<div id="list">
 <div class="topic">Some content</div>
 <div class="topic">Some content</div>
 <div class="topic">Some content</div>
</div>
<div class="action">Some other content</div>​

然后使用这个CSS：

#list .topic {
 border-bottom: 1px solid black;
}

#list .topic:last-child {
 border-bottom: none;
}

Answer 2

我建议使用first-child，而不是last-child。

div.topic {
    border-top: 1px solid black;
}

div.topic:first-child {
    border-bottom: none;
}

这适用于您当前的 HTML，并且更兼容跨浏览器。