identifizieren die erste Instanz eines bestimmten Elements, das in einem gesamten Dokument

Frage:

wie man CSS verwenden kann, identifiziert oder JavaScript, um das anfängliche Auftreten eines bestimmten Elementtyps über das gesamte HTML -Dokument zu zielen und zu stylen, unabhängig von seiner Platzierung innerhalb der Dokumentstruktur?

Antwort:

css-basierte Lösung

Leider liefert CSS allein keine Funktionen, die dem ersten Ereignis eines Elementtyps über das gesamte Dokument übereinstimmen. Die: Erste Pseudo-Klasse gilt laut CSS-Spezifikationen nur für das erste Geschwister ihres Typs in seinem übergeordneten Element. &&&]

Mit JavaScript können wir diese Funktionalität erreichen, indem wir eine benutzerdefinierte Klasse einführen, "ERSTE-VON-TYPE" und die Methode querySelector () zum Abrufen der ersten Übereinstimmung verwenden Element des gewünschten Typs. Anschließend weisen wir diese benutzerdefinierte Klasse dem abgerufenen Element zu:

document.querySelector ('P'). ClassName = 'erster von type';

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

Diese Funktion akzeptiert zwei Parameter: das Element, nach dem wir suchen wollen, und der Index des Vorkommens, das wir wollen Ziel. Es iteriert alle Geschwisterelemente und gibt das erste Element des angegebenen Typs zurück, wobei das gewünschte Styling angewendet wird.