Bagaimanakah Saya Boleh Memilih Elemen Anak Pertama dan Terakhir Dengan Betul Menggunakan CSS?

Memilih Anak Pertama dan Terakhir dengan CSS: Memahami Konteks

Memilih anak pertama atau terakhir dalam CSS memerlukan pemahaman yang jelas tentang konteks di mana CSS digunakan. Seperti yang ditunjukkan dalam coretan HTML dan CSS yang diberikan, menggunakan kelas pseudo :first-child dan :last-child terus ke elemen .area mungkin tidak menghasilkan hasil yang diingini. Ini kerana kelas pseudo ini hanya memilih anak pertama dan terakhir bagi elemen induk yang ditentukan.

Dalam contoh yang diberikan, elemen .area bukan anak unsur induk tertentu dalam struktur HTML. Ia adalah anak langsung unsur badan, yang mungkin mengandungi unsur lain, seperti teg skrip atau kandungan yang ditambah secara dinamik.

Untuk memilih anak pertama dan terakhir unsur .kawasan dengan betul, elemen bekas mesti diperkenalkan. Dengan membungkus elemen .area dalam elemen lain, seperti div dengan kelasnya sendiri, kelas pseudo boleh menyasarkan anak pertama dan terakhir dengan tepat dalam bekas itu.

Berikut ialah struktur HTML yang diubah suai yang menunjukkan yang betul penggunaan:

<div class="container">
  <div class="area">1</div>
  <div class="area">2</div>
  <div class="area">3</div>
  <div class="area">4</div>
</div>

Dengan struktur ini, CSS berikut akan memilih .kawasan pertama dan terakhir dengan betul kanak-kanak:

.container .area:first-child {
  background-color: red;
}

.container .area:last-child {
  background-color: green;
}

Dengan menyatakan elemen kontena sebagai pemilih induk, CSS kini boleh menyasarkan anak pertama dan terakhir elemen .area dalam konteks itu dengan tepat.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memilih Elemen Anak Pertama dan Terakhir Dengan Betul Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!