Bagaimanakah Saya Boleh Memilih Elemen Anak Pertama dan Terakhir dengan betul dengan CSS?

Mengatasi Isu CSS dalam Memilih Elemen Anak Pertama dan Terakhir

Apabila menghadapi kesukaran dalam memilih elemen anak pertama dan terakhir menggunakan CSS, adalah penting untuk mempertimbangkan konteks kod anda. Dalam Fiddle yang disediakan, elemen .area ialah anak langsung tag. Walau bagaimanapun, untuk menggunakan kelas pseudo :first-child dan :last-child, adalah penting untuk memastikan elemen .area bersarang dalam bekas.

Untuk menangani isu ini, tambahkan elemen bekas di sekeliling elemen .kawasan anda. Ini akan menyediakan konteks yang betul untuk mengenal pasti elemen anak pertama dan terakhir berdasarkan kedudukannya dalam bekas.

Berikut ialah versi semakan kod anda:

.container {
  display: flex;
}

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

.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>

Dengan meletakkan elemen .area dalam .container, anda mewujudkan hierarki yang jelas. Kelas pseudo :first-child dan :last-child kini boleh menyasarkan elemen anak pertama dan terakhir .container dengan tepat dengan tepat.

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