Heim >Web-Frontend >CSS-Tutorial >Wie wähle ich mithilfe von CSS die erste Instanz eines bestimmten Elementtyps in einem gesamten Dokument aus?
Wie wähle ich mithilfe von CSS die erste Instanz eines bestimmten Elementtyps in einem gesamten Dokument aus?
- Linda HamiltonOriginal
- 2024-12-08 22:52:12597Durchsuche
Übereinstimmung mit dem ersten Element eines bestimmten Typs irgendwo im Dokument
Frage:
Wie können Sie das erste angeben? Instanz eines bestimmten Elementtyps in einem gesamten Dokument mit CSS?
Antwort:
Normales CSS ermöglicht nicht die Übereinstimmung des ersten Elements eines bestimmten Typs im gesamten Dokument. Dies liegt daran, dass die :first-of-type-Pseudoklasse nur für Elemente relativ zu ihrem übergeordneten Element und nicht für das Dokumentstammverzeichnis gilt.
JavaScript-Lösungen
Simulieren von :first-of-type
Sie können die Funktionalität von :first-of-type mit JavaScript annähern, indem Sie die Methode querySelector() verwenden, die das erste passende Element aus dem angegebenen Selektor abruft. Hier ist ein Beispiel:
document.querySelector('p').className += ' first-of-type';
p {
background: red;
}
p.first-of-type {
background: pink;
}
Dieser Code weist die „First-of-Type“-Klasse dem ersten
zu. Element im Dokument, sodass Sie es unabhängig formatieren können:
<body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body>Das obige ist der detaillierte Inhalt vonWie wähle ich mithilfe von CSS die erste Instanz eines bestimmten Elementtyps in einem gesamten Dokument aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!