去掉上一个孩子的保证金

Question

我的代码在这里:

HTML

<nav id="pages">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Donate</a></li>
        <li><a href="#">Video</a></li>
        <li><a href="#" class="last">Contact</a></li>
    </ul>
</nav>  <!-- end pages -->

CSS

#pages{
    position: absolute;
    right: 0;
    top: 70px;

    ul li{
        float: left;
        margin-right: 5px;

        a{
            color: @link-color;
            display: block;
            padding: 0 10px;
            border-radius: 5px;
            font-weight: bold;
        }
    }
}

.last{
    margin-right: 0;
}

我为最后一个孩子添加课程"最后"以删除保证金但不受影响.我不使用:last-child因为它不会与IE6或IE7一起使用.希望有人帮忙？

Answer 1

没有必要添加一个"最后"类来做这个的最佳实践,而不是编写很多代码:

#pages li:last-child{
    margin-right: 0px;
}

这样,您不必最后创建任何类或任何类.css将查看id页面,最后一个li(last-child),并将使margin-right为0.

Answer 2

您可以使用:not(:last-child)排除最后一个孩子。因此，对于您的示例，您将拥有：

nav#pages ul :not(:last-child) {
    margin-right: 5px;
}

这会将 a 应用于margin-right: 5px除最后一个之外的所有<li> ... </li>。

查看 jsfiddle示例。

Answer 3

尝试这个：-

.last { margin-bottom: 0 !important; margin-right: 0 !important; }