Laksanakan pelbagai senario aplikasi CSS :nth-child(even) pseudo-class selector

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

Pemilih kelas pseudo dalam CSS ialah alat berkuasa yang boleh memilih elemen pada halaman A tertentu negeri atau lokasi. Antaranya, pemilih kelas pseudo :nth-child(even) digunakan untuk memilih elemen anak pada kedudukan genap di bawah elemen induk yang ditentukan. Penggunaannya adalah seperti berikut:

父元素:nth-child(even) {
  /* 样式属性 */
}

Yang berikut akan memperkenalkan beberapa senario aplikasi khusus untuk menunjukkan fleksibiliti dan kepraktisan CSS :nth-child(even) pseudo-class selector.

1. Gaya baris ganjil dan genap bagi jadual

Menggunakan pemilih kelas pseudo CSS :nth-child(even) boleh menetapkan gaya berbeza untuk baris ganjil dan genap jadual. Contoh kod adalah seperti berikut:

table tr:nth-child(even) {
  background-color: #f2f2f2;
}

Dengan cara ini, warna latar belakang baris genap dalam jadual akan menjadi kelabu muda, yang meningkatkan kebolehbacaan jadual.

2. Warna senarai berselang-seli

Dalam senarai panjang, untuk meningkatkan pengalaman membaca, anda boleh menggunakan pemilih kelas pseudo CSS :nth-child(even) untuk menetapkan warna latar belakang berselang-seli untuk item senarai. Contoh kod adalah seperti berikut:

ul li:nth-child(even) {
  background-color: #f2f2f2;
}

Dengan cara ini, warna latar belakang item kedua, keempat, keenam dan lain-lain nombor genap dalam senarai akan bertukar kepada kelabu muda, menjadikan senarai lebih mudah dibaca.

3. Gaya imej karusel pengiklanan

Dalam reka bentuk web, imej karusel sering digunakan untuk memaparkan berbilang iklan. Melalui pemilih kelas pseudo CSS :nth-child(even), anda boleh menetapkan gaya khusus untuk iklan dalam kedudukan bernombor genap dalam karusel untuk membezakannya daripada iklan dalam kedudukan bernombor ganjil. Contoh kod adalah seperti berikut:

.carousel li:nth-child(even) {
  font-weight: bold;
  color: red;
}

Dengan cara ini, fon iklan dalam kedudukan kedua, keempat, keenam dan lain-lain kedudukan bernombor genap dalam karusel akan ditebalkan dan bertukar menjadi merah, menjadikannya lebih menonjol dalam keseluruhan karusel.

4. Gaya menu web

Dalam reka bentuk web, bar menu biasanya merupakan bahagian penting dalam navigasi web. Melalui CSS :nth-child(even) pseudo-class pemilih, anda boleh menetapkan gaya berbeza untuk pilihan bernombor genap dalam bar menu untuk meningkatkan pembezaan visual. Contoh kod adalah seperti berikut:

ul.menu li:nth-child(even) {
  background-color: #f2f2f2;
  border-right: 1px solid #ccc;
}

Dengan cara ini, pilihan kedua, keempat, keenam dan lain-lain bernombor genap dalam bar menu akan mempunyai warna latar belakang kelabu muda dan garis sempadan di sebelah kanan untuk membezakannya daripada pilihan lain Datang.

Melalui contoh di atas, kita boleh melihat pelbagai senario aplikasi CSS :nth-child(even) pseudo-class selector. Dengan menggunakan pemilih ini dengan betul, kami boleh meningkatkan kebolehbacaan, estetika dan pengalaman pengguna halaman. Sama ada jadual, senarai, karusel atau bar menu, anda boleh mencapai kawalan gaya yang diperhalusi melalui pemilih kelas pseudo CSS :nth-child(even). Semoga contoh-contoh ini membantu dalam kerja pembangunan anda!

Atas ialah kandungan terperinci Laksanakan pelbagai senario aplikasi CSS :nth-child(even) pseudo-class selector. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!