Heim >Web-Frontend >CSS-Tutorial >Wie kann ich die erste Instanz eines bestimmten Elementtyps in einem gesamten Dokument formatieren?
Wie kann ich die erste Instanz eines bestimmten Elementtyps in einem gesamten Dokument formatieren?
- Susan SarandonOriginal
- 2024-12-28 21:29:10473Durchsuche
Übereinstimmung mit dem ersten Element eines bestimmten Typs im gesamten Dokument
Problem:
Wie können Sie den :first-of-type-Stil auf das erste Element eines bestimmten Typs an einer beliebigen Stelle im Dokument anwenden, unabhängig von seinem übergeordneten Element? Element?
CSS-Einschränkungen:
CSSs :first-of-type-Pseudoklasse wählt nur das erste Geschwister eines bestimmten Typs innerhalb seines übergeordneten Elements aus, nicht über das gesamtes Dokument.
JavaScript Lösung:
:First-of-Type-Klassenzusatz:
- Fügen Sie eine „First-of-Type“-Klasse zum ersten passenden Element hinzu Verwenden der querySelector()-Methode von JavaScript.
- Wenden Sie Stile auf Elemente mit dem „First-of-Type“ an. Klasse.
Beispiel:
document.querySelector('p').className += ' first-of-type';
p {
background: red;
}
p.first-of-type {
background: pink;
}
<body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body>
Diese Lösung stellt sicher, dass der erste Absatz im gesamten Dokument, unabhängig von seiner Position , erhält das „First-of-Type“-Styling.
Das obige ist der detaillierte Inhalt vonWie kann ich die erste Instanz eines bestimmten Elementtyps in einem gesamten Dokument formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!