最後孩子選錯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

回答

相關問題