Gunakan pemilih kelas pseudo :first-of-type untuk memilih gaya elemen pertama daripada jenis yang sama

Pemilih kelas pseudo jenis pertama dalam CSS boleh digunakan untuk memilih dan menggayakan elemen pertama daripada jenis yang sama. Pemilih ini boleh digunakan untuk berbilang elemen teg, seperti p, div, span, dsb.

Berikut ialah contoh kod khusus:

Kod HTML:

<div class="container">
  <h1>标题1</h1>
  <p>第一段文字</p>
  <p>第二段文字</p>
  <h2>标题2</h2>
  <p>第三段文字</p>
  <p>第四段文字</p>
</div>

Kod CSS:

p:first-of-type {
  font-weight: bold;
}

Dalam kod di atas, kami telah memilih elemen tag p pertama dan menetapkannya kepada huruf tebal. Hasilnya akan dipaparkan dalam penyemak imbas, dan perenggan pertama teks akan ditetapkan kepada tebal.

Begitu juga, kami juga boleh menggunakan pemilih jenis pertama untuk memilih elemen teg pertama yang lain. Contohnya:

h1:first-of-type {
  font-size: 24px;
}

Di sini kami memilih elemen teg h1 pertama dan menetapkan saiz fonnya kepada 24 piksel.

Perlu diingat bahawa menggunakan pemilih jenis pertama hanya boleh memilih elemen pertama daripada jenis yang sama. Jika kita ingin memilih elemen pertama antara jenis elemen yang berbeza, kita boleh menggunakan :first-child.

Ringkasnya, menggunakan pemilih kelas pseudo jenis pertama boleh menetapkan gaya khusus untuk elemen pertama daripada jenis yang sama dengan sangat mudah.

Atas ialah kandungan terperinci Gunakan pemilih kelas pseudo :first-of-type untuk memilih gaya elemen pertama daripada jenis yang sama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!