Gunakan pemilih kelas pseudo :nth-of-type(2) untuk memilih gaya elemen kedua daripada jenis yang sama-tutorial css-php.cn

Gunakan pemilih kelas pseudo :nth-of-type(2) untuk memilih gaya elemen kedua daripada jenis yang sama

WBOY

Lepaskan： 2023-11-20 12:56:15

asal

805 orang telah melayarinya

Gunakan pemilih kelas pseudo :nth-of-type(2) untuk memilih gaya elemen kedua daripada jenis yang sama

Tajuk: Gunakan pemilih kelas pseudo :nth-of-type(2) untuk memilih gaya elemen kedua daripada jenis yang sama

Dalam pembangunan web, kita selalunya perlu menambah gaya pada elemen tertentu. Kadangkala kita perlu memilih elemen tertentu antara jenis elemen yang sama untuk menambah gaya, bukannya semua jenis elemen yang sama. Dalam kes ini, anda boleh menggunakan pemilih kelas pseudo dalam CSS: nth-of-type(2) untuk memilih elemen kedua daripada jenis yang sama dan menambah kesan gaya padanya.

Pemilih kelas pseudo ialah pemilih CSS khas yang digunakan untuk memilih elemen yang memenuhi syarat tertentu. Antaranya, pemilih kelas pseudo :nth-of-type(2) bermaksud memilih elemen kedua di antara unsur-unsur daripada jenis yang sama. Cara menggunakannya adalah seperti berikut:

/* 选择同类型元素中的第二个元素 */
选择器:nth-of-type(2) {
    属性: 值;
}

Salin selepas log masuk

Berikut ialah contoh kod khusus untuk menunjukkan cara menggunakan pemilih kelas pseudo :nth-of-type(2) untuk memilih elemen kedua bagi jenis elemen yang sama:

<!DOCTYPE html>
<html>
<head>
    <style>
    /* 选择同类型元素中的第二个元素 */
    ul li:nth-of-type(2) {
        background-color: yellow;
    }
    </style>
</head>
<body>
    <ul>
        <li>第一个元素</li>
        <li>第二个元素</li> <!-- 这里将被选中，因为是同类型元素中的第二个元素 -->
        <li>第三个元素</li>
    </ul>
    <ul>
        <li>第一个元素</li>
        <li>第二个元素</li> <!-- 这里不会被选中，因为是同类型元素中的第一个元素 -->
    </ul>
</body>
</html>

Salin selepas log masuk

Di atas Dalam contoh kod, kami memilih elemen li kedua dalam elemen jenis yang sama ul melalui pemilih ul li:nth-of-type(2), dan menetapkan warna latar belakangnya kepada kuning. Dengan cara ini, elemen kedua daripada jenis yang sama akan mempunyai gaya yang berbeza daripada elemen lain.

Perlu diperhatikan bahawa :nth-of-type(2) ialah atribut baharu CSS3, jadi ia perlu serasi dengan penyemak imbas yang berbeza apabila menggunakannya. Keserasian boleh dicapai dengan menambahkan awalan vendor penyemak imbas yang sepadan.

Ringkasnya, menggunakan pemilih kelas pseudo :nth-of-type(2) boleh memilih elemen kedua daripada jenis yang sama dan menambah gaya padanya. Ciri ini sangat berguna dalam pembangunan web, membolehkan kami mengawal gaya elemen pada halaman dengan lebih tepat. Anda boleh menggunakan ciri ini secara fleksibel untuk mencapai pelbagai kesan gaya mengikut keperluan sebenar.

Atas ialah kandungan terperinci Gunakan pemilih kelas pseudo :nth-of-type(2) untuk memilih gaya elemen kedua daripada jenis yang sama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!