5

ここに私のコード：

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 では使用しないため、使用しません。誰かが助けてくれることを願っていますか？

4

8 に答える 8

0

この LESS ベースの CSS の出力は、次のいずれかになります。どれかわかりません。私は LESS に詳しくありません。

#pages > ul > li {
    margin-right: 50px;
}

#pages ul li {
    margin-right: 50px;
}

クラス.lastは、この階層の外で定義されます。問題は、それが「唯一の」クラスであるため、常に id のルールよりも優先順位が低くなることです#pages。

したがって、次のように完全修飾を定義します。

#pages ul li.last {
    margin-right: 0;
}

または、他の定義内に追加します。

#pages {
    ul li {}
    ul li.last { margin-right: 0; }
}

デモ

購入前にお試しください

于 2013-09-25T16:39:33.733 に答える
0

CSS を次のように変更します。

nav#pages ul li.last {
    margin-right: 0px;
}

とあなたのHTMLへ：

<li class="last"><a href="#">Contact</a></li>
于 2013-09-25T16:49:53.573 に答える