Bagaimanakah Saya Boleh Menggayakan Contoh Pertama Jenis Elemen Tertentu dalam Keseluruhan Dokumen?-tutorial css-php.cn

Bagaimanakah Saya Boleh Menggayakan Contoh Pertama Jenis Elemen Tertentu dalam Keseluruhan Dokumen?

Susan Sarandon

Lepaskan： 2024-12-28 21:29:10

asal

467 orang telah melayarinya

How Can I Style the First Instance of a Specific Element Type in an Entire Document?

Memadankan Elemen Pertama Jenis Tertentu dalam Keseluruhan Dokumen

Masalah:

Bagaimanakah anda boleh menggunakan :penggayaan jenis pertama kepada elemen pertama jenis tertentu di mana-mana sahaja dalam dokumen, tanpa mengira unsur induknya?

Penghadan CSS:

kelas pseudo jenis pertama CSS hanya memilih adik beradik pertama jenis tertentu dalam elemen induknya, tidak merentas keseluruhan dokumen.

JavaScript Penyelesaian:

:Tambahan Kelas jenis pertama:

Tambahkan kelas "jenis pertama" pada elemen padanan pertama menggunakan kaedah querySelector() JavaScript.
Gunakan penggayaan pada elemen dengan "jenis pertama" kelas.

Contoh:

document.querySelector('p').className += ' first-of-type';

Salin selepas log masuk

p {
  background: red;
}

p.first-of-type {
  background: pink;
}

Salin selepas log masuk

<body>
  <section>
    <p>111</p>
    <p>222</p>
    <p>333</p>
  </section>
  <p>444</p>
  <p>555</p>
</body>

Salin selepas log masuk

Penyelesaian ini memastikan perenggan pertama dalam keseluruhan dokumen, tanpa mengira lokasinya , menerima penggayaan "jenis pertama".

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Contoh Pertama Jenis Elemen Tertentu dalam Keseluruhan Dokumen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!