Wie kann ich die erste Instanz eines bestimmten Elementtyps in einem gesamten Dokument formatieren?-CSS-Tutorial-php.cn

Wie kann ich die erste Instanz eines bestimmten Elementtyps in einem gesamten Dokument formatieren?

Susan Sarandon

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

Original

488 Leute haben es durchsucht

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

Ü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';

Nach dem Login kopieren

p {
  background: red;
}

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!