如何从列表中的最后一项删除样式？

Question

我刚刚创造了这样的东西：

有没有办法从最后一个列的末尾删除该行？ （这是一个PHP）

代码：

<div style="border-bottom: 1px solid #cdcdcd; margin-right: 10px; margin-bottom: 5px; font-size: 10px;">
            <div name="gameicon" style="width: 16px; margin-left: 5px; float: left;">
                <img src="images/games/<?php echo $games['short']; ?>.gif" alt="ICON" />
            </div>
            <div id="game" style="width: 115px; margin-left: 5px; float: left; text-align: right;">
                <b><?php echo $games['game']; ?></b>
            </div>
            <div style="float: left; margin-left: 15px;">
                <?php echo $signs_count; ?>
            </div>
            <div style="float: left; margin-left: 3px; margin-right: 3px;">/</div>
            <div style="float: left; color: <?php echo $site_color; ?>;">
                <b><?php echo $signs_count_paid; ?></b>
            </div>
            <div class="clearer"></div>
        </div>

Answer 1

编辑：对不起，我在您编写代码之前回答了问题。这个答案仍然适用，您只需要更改HTML以将div放在无序列表中。

你可以使用：

li:last-child div
{
    border-bottom: 0;
}

但是，某些浏览器不支持last-child选择器（例如IE7）。 first-child选择器有更多支持。你有一个选择是将边框添加到元素的顶部而不是底部，然后使用以下方法从顶部删除该边框：

li:first-child div
{
    border-top: 0;
}

---

另一种选择是使用jQuery来改变CSS，因此你知道它可以跨浏览器工作：

$('#yourUL > li:last-child > div').css('border-bottom','0');

Answer 2

如果您更改代码，首先来自：

<div style="border-bottom: 1px solid #cdcdcd; margin-right: 10px; margin-bottom: 5px; font-size: 10px;">

致：

<div class="mainDiv">

CSS：

.mainDiv { 
    border-top: 1px solid #cdcdcd; 
    margin-right: 10px; 
    margin-top: 5px;
    padding-top: 5px; 
    font-size: 10px;
}

.mainDiv:first-child { 
    border: 0;
}

我希望这种方式会有所帮助。