Gunakan pemilih kelas pseudo :first-child untuk memilih gaya CSS elemen anak pertama

Gunakan pemilih kelas pseudo anak pertama untuk memilih gaya CSS elemen anak pertama

Pemilih kelas pseudo dalam CSS ialah alat berkuasa yang boleh memilih dan mengubah suai elemen tertentu. Antaranya, pemilih kelas pseudo :first-child ialah pemilih yang biasa digunakan, yang boleh memilih elemen anak pertama elemen, tanpa mengira jenis atau kedudukan elemen anak. Dalam artikel ini, kami akan memperincikan cara menggunakan pemilih kelas pseudo :first-child dan menyediakan beberapa contoh kod konkrit.

Mula-mula, mari lihat contoh kod HTML ringkas:

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

Dalam contoh ini, kita mempunyai senarai tidak tertib (ul) dengan tiga item senarai (li), iaitu epal, pisang dan oren . Sekarang, katakan kita ingin menetapkan warna teks item senarai pertama (iaitu Apple) kepada merah, kita boleh menggunakan pemilih kelas pseudo anak pertama untuk mencapai kesan ini.

Berikut ialah contoh kod CSS khusus:

ul li:first-child {
  color: red;
}

Dalam kod ini, kami menggunakan pemilih kelas pseudo anak pertama untuk memilih elemen li pertama di bawah elemen ul. Kemudian, kami menetapkan warna teks elemen yang dipilih kepada merah.

Jika kami menggunakan kod CSS ini pada contoh kami, hasilnya ialah warna fon item senarai pertama (epal) bertukar kepada merah, manakala dua item senarai yang lain (pisang dan oren) mengekalkan warna lalai .

Selain itu, berikut ialah contoh HTML yang lebih kompleks dengan berbilang elemen bersarang:

<div class="container">
  <h1 id="Hello-world">Hello, world!</h1>
  <p>Welcome to my website.</p>
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
  </ul>
</div>

Jika kita ingin memilih item senarai pertama dan menetapkan warna teksnya kepada merah, kita perlu mengubah suainya sedikit. Sekarang, kita perlu memilih elemen anak pertama unsur ul menggunakan pemilih kelas pseudo :first-child dan tetapkan warna teksnya kepada merah. Kod CSS khusus adalah seperti berikut:

.container ul li:first-child {
  color: red;
}

Dalam kod ini, kita mula-mula memilih elemen ul di bawah kelas .container, dan kemudian menggunakan :first-child pseudo-class selector untuk memilih elemen li pertama bagi elemen ul. Akhir sekali, kami menetapkan warna teks elemen yang dipilih kepada merah.

Untuk meringkaskan, dengan menggunakan pemilih kelas pseudo :first-child, kita boleh memilih elemen anak pertama elemen dengan mudah dan menggunakan gaya CSS tertentu padanya. Sama ada ia elemen ringkas atau struktur bersarang yang kompleks, pemilih ini boleh membantu kami mencapai kesan yang diingini. Saya harap contoh kod yang disediakan dalam artikel ini membantu anda.

Atas ialah kandungan terperinci Gunakan pemilih kelas pseudo :first-child untuk memilih gaya CSS elemen anak pertama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!