2

12 以上の li を含む単純な順序付けられていないリストがあります。

<ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

最初の 4 つのリーをターゲットにして背景を変更し、最後の 4 つのリーをターゲットにして別の背景を作成したいと考えています。CSSだけでこれを行う方法はありますか？最初の要素、最後の li 要素、または 4 つおきの要素を対象とする疑似クラスの使用方法は知っていますが、最初の 4 要素と最後の 4 要素すべてを対象にしたいのです。

4

3 に答える 3

2

を使用nth-childするのがベスト プラクティスです。

li:nth-child(-n+4) {
   background-color:gren;   
}

ただし、ブラウザの完全な互換性は得られません。 特に下位バージョンのIE では、静的 html を使用している場合は、クラスを作成して最初の 4 つに適用できます。li

例えば：

.special{
    background-color:gren;
    }


<ul>
    <li class="special"><a href="#">Link</a></li>
    <li class="special"><a href="#">Link</a></li>
    <li class="special"><a href="#">Link</a></li>
    <li class="special"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>
于 2013-05-31T09:33:57.703 に答える
1

nth-childおよびnth-last-of-typeを使用できます。

したがって、CSS コードは次のようになります。

ul li:nth-child(-n+4) {
    background: red;
}

ul li:nth-last-of-type(-n+4) {
    background: blue;
}
于 2014-01-14T10:32:01.160 に答える