Bagaimana untuk Menyasarkan Kanak-kanak Pertama dan Terakhir dengan Berkesan dengan CSS Pseudo-class?

Cara Menyasarkan Anak Pertama dan Terakhir dalam CSS

Memilih elemen anak pertama dan terakhir menggunakan CSS boleh menjadi rumit, kerana "pertama kelas pseudo -anak" dan "anak terakhir" terpakai kepada anak terdekat unsur induk.

Dalam menyediakan kod CSS, menyasarkan elemen anak pertama dan terakhir kelas ".area" tidak berfungsi kerana elemen tersebut bukan anak langsung unsur bekas. Untuk membuat pemilihan berfungsi, anda boleh menambah elemen bekas dan menentukan anak-anaknya sebagai sasaran.

Berikut ialah contoh yang termasuk elemen bekas:

.container {
  display: flex;
}

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

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

.container > .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 pengubahsuaian ini , elemen ".area" menjadi anak langsung kepada elemen ".container", dan kelas pseudo "anak pertama" dan "anak terakhir" boleh digunakan untuk pilih elemen anak pertama dan terakhir dengan sewajarnya.

Atas ialah kandungan terperinci Bagaimana untuk Menyasarkan Kanak-kanak Pertama dan Terakhir dengan Berkesan dengan CSS Pseudo-class?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!