Wie kann ich das erste Vorkommen eines bestimmten HTML-Elements im gesamten Dokument formatieren?

Übereinstimmung mit dem ersten/n-ten Element eines bestimmten Typs im gesamten Dokument

Problem:
Wie können wir CSS-Stile auf das erste Vorkommen eines bestimmten HTML-Elements anwenden, unabhängig von seiner Position im Dokument?

CSS-Lösung:
Leider kann CSS allein dies nicht erreichen. Die :first-of-type-Pseudoklasse gilt nur für Elemente, die die ersten ihres Typs innerhalb ihres übergeordneten Elements sind.

JavaScript-Lösung: querySelector()
Mit JavaScript, Wir können die Methode querySelector() nutzen, um Elemente im Dokument zu identifizieren und zu bearbeiten. Um beispielsweise das erste p-Element im Dokument zu formatieren:

document.querySelector('p').className = ' first-of-type';<br>

Dieser Code fügt dem ersten p-Element die Klasse „first-of-type“ hinzu, die dann mit dem folgenden CSS gestaltet werden kann Regeln:

p.first-of-type {<br>Hintergrund: rosa;<br>}<br>

Fazit:
Während dies mit CSS allein nicht möglich ist, bietet die Verwendung der querySelector()-Methode von JavaScript eine flexible Lösung zum Anpassen und Gestalten der erstes/n-tes Element eines bestimmten Typs im gesamten Dokument.

Das obige ist der detaillierte Inhalt vonWie kann ich das erste Vorkommen eines bestimmten HTML-Elements im gesamten Dokument formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!