Gunakan pemilih kelas pseudo :nth-child(odd) untuk memilih gaya elemen anak pada kedudukan ganjil.-tutorial css-php.cn

Gunakan pemilih kelas pseudo :nth-child(odd) untuk memilih gaya elemen anak pada kedudukan ganjil.

WBOY

Lepaskan： 2023-11-20 11:35:01

asal

1012 orang telah melayarinya

Gunakan pemilih kelas pseudo :nth-child(odd) untuk memilih gaya elemen anak pada kedudukan ganjil.

Apabila kita mereka bentuk halaman web, kadangkala kita perlu melakukan penggayaan khas pada sub-elemen dalam halaman tersebut. Antaranya, pemilih kelas pseudo :nth-child (ganjil) sering digunakan untuk memilih elemen anak pada kedudukan ganjil untuk pengubahsuaian gaya. Seterusnya, kami akan menunjukkan cara menggunakan pemilih kelas pseudo :nth-child(odd) melalui contoh kod tertentu.

Mula-mula, mari buat struktur HTML yang ringkas, termasuk elemen induk dan berbilang elemen anak. Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gunakan pemilih kelas pseudo :nth-child(odd) untuk memilih gaya elemen anak pada kedudukan ganjil.</title>
  <style>
    .parent {
      display: flex;
      justify-content: space-between;
      width: 80%;
      margin: 0 auto;
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: #f2f2f2;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 5px;
    }
    .child:nth-child(odd) {
      background-color: #ffcccc;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami mula-mula mencipta elemen induk yang mengandungi berbilang elemen anak dan menggunakan reka letak Flex untuk menyusun elemen anak. Seterusnya, kami menetapkan lebar, ketinggian, warna latar belakang dan atribut lain untuk gaya asas elemen kanak-kanak. Kemudian, dalam pemilih .child:nth-child(odd), kami menggunakan pemilih kelas pseudo :nth-child(odd) untuk memilih elemen anak pada kedudukan ganjil dan menetapkan warna latar belakangnya kepada merah jambu. Dengan cara ini, anda boleh mengubah suai gaya elemen anak bernombor ganjil dengan mudah melalui pemilih kelas pseudo :nth-child(odd).

Apabila kita menjalankan kod ini dalam penyemak imbas, kita dapat melihat bahawa warna latar belakang elemen kanak-kanak dalam kedudukan ganjil bertukar kepada merah jambu, manakala warna latar belakang elemen kanak-kanak dalam kedudukan genap kekal kelabu. Ini adalah contoh penggunaan pemilih kelas pseudo :nth-child(odd).

Dalam reka bentuk web sebenar, kami sering menggunakan pemilih kelas pseudo :nth-child (ganjil) untuk menetapkan gaya khas untuk elemen kanak-kanak pada kedudukan ganjil, yang boleh membawa kesan visual yang lebih kaya ke halaman. Saya berharap melalui contoh dalam artikel ini, semua orang boleh menjadi lebih mahir dalam menggunakan pemilih kelas pseudo :nth-child(odd) untuk mencantikkan gaya elemen kanak-kanak halaman.

Atas ialah kandungan terperinci Gunakan pemilih kelas pseudo :nth-child(odd) untuk memilih gaya elemen anak pada kedudukan ganjil.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!