最后一个孩子选错了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.action的最后一个div而不是类测试的最后一个div。

我该如何解决？

Answer 1

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

Working DEMO

<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，并且更兼容跨浏览器。