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はまだ下部に境界線があります。私が思う問題は、クラステストの最後のdivではなくborder-bottom: none最後のdivに適用されることです。div.action

どうすれば解決できますか？

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で機能し、クロスブラウザとの互換性が高くなります。