html - 如何通过 CSS 删除最后一个 div 分隔符的 border-bottom？

Question

我在一个 div 框中显示最新消息，其中每个消息都通过 border-bottom 分隔符与其他消息分开。请注意，在 HTML 中我没有使用任何 ul li；而不是我使用简单的 div。问题是最后一个新闻 div 也显示了边框底部分隔符。我不知道如何删除它，即使我已经尝试过 :last-child 选择器，但它不起作用。我知道通过使用 ul li，问题可以通过 :last-child 解决，但我不想更改我的 HTML。这是一个快照主机:

HTML 代码:

<div class="float_left_div posts">
    <h3>Latest News</h3>
    <div class="news_wrapper">
        <div class="news_txt">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
        </div>
        <div class="div_separator"></div>
    </div>
    <div class="news_wrapper">
        <div class="news_txt">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
        </div>
        <div class="div_separator"></div>
    </div>
    <div class="news_wrapper">
        <div class="news_txt">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy. <span>more+</span></p>
        </div>
        <div class="div_separator"></div>
    </div>
</div>

演示在:

JSFiddle

那么通过保持相同的 HTML，我们如何才能删除分隔符的最后一个边框？

Answer 1

使用 CSS last-child 属性去除边框。

.posts .news_wrapper:last-child .div_separator
{
border-bottom:0px;
}

DEMO