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

Memilih Elemen Anak Pertama dan Terakhir Menggunakan CSS

Memilih elemen anak tertentu pada halaman web boleh dicapai menggunakan kelas pseudo CSS. Walau bagaimanapun, potensi cabaran timbul apabila cuba memilih anak pertama atau terakhir.

Perangkap biasa adalah untuk menentukan gaya secara langsung pada elemen kanak-kanak tanpa mengambil kira bekas induknya. Ambil contoh berikut:

.area {
  height: 100px;
  width: 100px;
}

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

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

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

Dalam senario ini, CSS tidak akan menggunakan gaya yang diingini pada elemen anak pertama dan terakhir kerana mereka bukan anak langsung ibu bapa dengan kelas kawasan. Untuk membetulkan isu ini, anda perlu membalut elemen anak dalam elemen induk lain:

.container {
  . . .
}

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

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

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

Pengubahsuaian ini memastikan peraturan CSS digunakan pada elemen anak pertama dan terakhir dalam elemen bekas. Dengan membungkus elemen dalam bekas induk, anda menentukan konteks khusus untuk elemen anak sasaran, membolehkan anda menggayakannya dengan tepat berdasarkan kedudukannya dalam bekas itu.

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