Dalam struktur HTML, bagaimana untuk memilih elemen anak pertama dengan nama kelas tertentu melalui CSS?

Dalam struktur HTML, kedudukan tepat elemen kanak -kanak pertama dengan nama kelas tertentu adalah masalah CSS yang biasa, terutamanya apabila bilangan elemen kanak -kanak tidak pasti. Artikel ini akan menunjukkan melalui contoh bagaimana menyelesaikan masalah ini menggunakan ciri -ciri canggih pemilih CSS.

Katakan kita mempunyai bekas div yang mengandungi pelbagai elemen kelas activebar dan item , dan bilangan elemen activebar dan item diubah secara dinamik. Matlamat kami adalah untuk memilih elemen kelas item pertama hanya melalui CSS.

Contoh Struktur HTML:

<div class="main">
  <div class="activebar"></div>
  <div class="activebar"></div>
  <div class="activebar"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Pemilih kelas pseudo kelas first-child first-of-type yang mudah tidak terpakai di sini, kerana first-child hanya memilih elemen kanak-kanak pertama elemen induk, sementara first-of-type hanya memilih unsur-unsur jenis yang sama.

Penyelesaian: Gunakan fungsi lanjutan pemilih nth-child . CSS moden membolehkan penggunaan pemilih kompleks di nth-child untuk menentukan skop.

Kod CSS berikut membolehkan anda memilih elemen item pertama dengan tepat:

 .main> .item: nth-child (n of .item) {
  /* Peraturan gaya*/
}

Fungsi nth-child(n of .item) adalah: Di antara semua elemen kanak-kanak unsur .main , hanya unsur-unsur kanak-kanak yang mempunyai kelas .item dipertimbangkan, dan yang pertama dipilih daripadanya ( n mewakili yang pertama). Ini secara berkesan mengabaikan elemen activebar di dalamnya dan secara langsung menempatkan elemen item pertama.

Dengan cara ini, walaupun bilangan activebar dan elemen item berubah, kita sentiasa boleh memilih elemen item pertama dengan tepat, dengan itu mencapai kawalan gaya yang fleksibel.

Atas ialah kandungan terperinci Dalam struktur HTML, bagaimana untuk memilih elemen anak pertama dengan nama kelas tertentu melalui CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!