最后孩子选错div
问题描述:
我在遇到:last-child
工作遇到问题。最后孩子选错div
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;
}
最后div.test
仍然在底部边框。 我认为问题是,border-bottom: none
适用于非常最后一个div是div.action
,而不是类测试的最后一个div。
我该如何解决?
答
你将不得不更新你的标记,以达到预期的结果。环绕你未知的物品的包装,如:
<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;
}
+0
我想我将不得不与这一个去。我感到惊讶的是,这个选择器以这种方式工作(即忽略了类...)。 – Eleeist
答
我建议使用first-child
,不last-child
。
div.topic {
border-top: 1px solid black;
}
div.topic:first-child {
border-bottom: none;
}
这适用于当前的HTML,更跨浏览器兼容。
对此有读:http://*.com/questions/6401268/how-do-i-select-the-last-child-with-a-specific-class-name-in-css你的问题可能是重复的。简而言之,没有':last-class-class'选择器,所以你需要使用JavaScript或使用['border-top'](http://jsfiddle.net/97Dr4/1/)。 –
你链接到的问题的解决方案是使用绝对顺序(即第4项),而我的div由服务器生成,我不知道有多少。 – Eleeist
哎呀,我从错误的标签复制XD我编辑了原来的评论,并改为我想复制的链接。对困惑感到抱歉。 –