CSS :nth-last-child(-n+4) 擬似クラス セレクターの複数のアプリケーション シナリオを実装する

CSS :nth-last-child(-n 4) 擬似クラス セレクターの複数のアプリケーション シナリオを実装するには、特定のコード例が必要です

CSS 擬似クラス選択 このツールは、要素を選択するための便利な方法を多数提供します。その中でも、:nth-last-child(-n 4) 擬似クラス セレクターは、最後から 4 番目の子とそれ以降のすべての要素を選択できる非常に便利なセレクターです。この種のセレクターは実際の開発において多くの応用シーンがありますが、以下ではこの疑似クラスセレクターを使用した具体的なコード例をいくつか紹介します。

1. ナビゲーション バーのスタイル

ほとんどの Web サイト開発では、ナビゲーション バーのデザインに遭遇します。 :nth-last-child(-n 4) 疑似クラス セレクターを使用すると、ナビゲーション バーの 4 番目以降の要素を簡単に選択し、下枠を表示しないように設定するなど、特定のスタイルを追加できます。特別な効果を達成するために。

<style>
.nav-bar div:nth-last-child(-n+4) {
    border-bottom: none;
}
</style>

<div class="nav-bar">
    <div>首页</div>
    <div>新闻</div>
    <div>产品</div>
    <div>关于</div>
    <div>联系</div>
    <div>更多</div>
</div>

2. リスト スタイル

リストでは、最後から 4 番目の要素以降に特別なスタイルを追加する必要がある場合があります。たとえば、重要なコンテンツとしてマークしたり、表示されたりするなどです。さまざまな色で。 :nth-last-child(-n 4) 擬似クラス セレクターを使用すると、この効果を簡単に実現できます。

<style>
.list-item:nth-last-child(-n+4) {
    color: red;
    font-weight: bold;
}
</style>

<ul>
    <li class="list-item">第1条内容</li>
    <li class="list-item">第2条内容</li>
    <li class="list-item">第3条内容</li>
    <li class="list-item">第4条内容</li>
    <li class="list-item">第5条内容</li>
    <li class="list-item">第6条内容</li>
</ul>

3. テーブル スタイル

テーブルでは、:nth-last-child(-n 4) 疑似クラス セレクターを使用して、次から 4 番目の列を選択できます。一番下のセルとそれ以降のセルには、背景色や太字表示などの特定のスタイルを追加します。

<style>
table td:nth-last-child(-n+4) {
    background-color: yellow;
    font-weight: bold;
}
</style>

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
</table>

上記のコード例を通して、nth-last-child(-n 4) 擬似クラス セレクターには実際の開発における多くのアプリケーション シナリオがあることがわかります。これにより、要素を選択したり、要素に特定のスタイルを追加したりする際の柔軟性が高まります。これらの例が、CSS 疑似クラス セレクターの適用を改善するのに役立つことを願っています。

以上がCSS :nth-last-child(-n+4) 擬似クラス セレクターの複数のアプリケーション シナリオを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。