Laksanakan berbilang senario aplikasi CSS :nth-last-child(-n+4) pemilih kelas pseudo

Untuk melaksanakan pelbagai senario aplikasi CSS :nth-last-child(-n+4) pemilih kelas pseudo, contoh kod khusus diperlukan

Pemilih kelas pseudo CSS menyediakan kami banyak cara mudah untuk memilih elemen. Cara. Antaranya, pemilih kelas pseudo :nth-last-child(-n+4) ialah pemilih yang sangat berguna, yang boleh memilih anak keempat hingga terakhir dan semua elemen selepasnya. Pemilih jenis ini mempunyai banyak senario aplikasi dalam pembangunan sebenar Di bawah saya akan memperkenalkan anda kepada beberapa contoh kod khusus menggunakan pemilih kelas pseudo ini.

1. Gaya Bar Navigasi

Dalam kebanyakan pembangunan laman web, kami akan menemui reka bentuk bar navigasi. Menggunakan pemilih kelas pseudo :nth-last-child(-n+4), kita boleh dengan mudah memilih elemen ke-4 dan seterusnya bagi bar navigasi dan menambah gaya tertentu padanya, seperti menetapkannya untuk tidak dipaparkan kesan khas.

<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. Gaya senarai

Dalam senarai, kita mungkin perlu menambah gaya khas pada elemen keempat hingga terakhir dan selepasnya, seperti menandainya sebagai kandungan penting atau memaparkannya dalam warna yang berbeza. Menggunakan pemilih kelas pseudo :nth-last-child(-n+4), kita boleh mencapai kesan ini dengan mudah.

<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. Gaya jadual

Dalam jadual, kita boleh menggunakan pemilih kelas pseudo :nth-last-child(-n+4) untuk memilih sel dalam lajur ke-4 dari bawah dan selepas, dan menambah khusus Gaya, seperti warna latar belakang atau paparan tebal.

<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>

Melalui contoh kod di atas, kita dapat melihat bahawa pemilih kelas pseudo-anak-terakhir(-n+4) mempunyai banyak senario aplikasi dalam pembangunan sebenar. Ia memberi kami lebih fleksibiliti dalam memilih elemen dan menambah gaya tertentu padanya. Semoga contoh ini akan membantu anda menjadi lebih baik dalam menggunakan pemilih kelas pseudo CSS.

Atas ialah kandungan terperinci Laksanakan berbilang senario aplikasi CSS :nth-last-child(-n+4) pemilih kelas pseudo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!