最后孩子选错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; 
}

JSFiddle

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

我该如何解决？

来源

2012-12-16 Eleeist

对此有读：http://stackoverflow.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我编辑了原来的评论，并改为我想复制的链接。对困惑感到抱歉。 –

你将不得不更新你的标记，以达到预期的结果。环绕你未知的物品的包装，如：

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

来源

2012-12-16 17:40:49

我想我将不得不与这一个去。我感到惊讶的是，这个选择器以这种方式工作（即忽略了类...）。 – Eleeist

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

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

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

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

来源

2012-12-16 17:43:44

比什么跨浏览器兼容？ '：first-child'和'：last-child'一样也被支持。两者都不适用于旧版浏览器和IE。 – Horen

@霍尔第一胎在IE8中工作，但最后一个孩子没有。 http://jsfiddle.net/JT5SN/3/。（见http://www.w3schools.com/css/css_pseudo_classes.asp） –

我在看这里http://reference.sitepoint.com/css/pseudoclass-firstchild – Horen

最后孩子选错div

回答

相关问题