Wie formatiere ich die erste Instanz eines Elementtyps in HTML mithilfe von CSS oder JavaScript?

Identifizieren der ersten Instanz eines bestimmten Elementtyps in einem gesamten Dokument

Frage:

Wie kann man CSS nutzen? oder JavaScript, um das anfängliche Vorkommen eines bestimmten Elementtyps im gesamten HTML-Dokument gezielt und formatiert zu gestalten, unabhängig von seiner Platzierung im Dokument Struktur?

Antwort:

CSS-basierte Lösung

Leider bietet CSS allein keine Funktionalität, die mit der ersten übereinstimmt Vorkommen eines Elementtyps im gesamten Dokument. Die :first-of-type-Pseudoklasse gilt gemäß CSS-Spezifikationen nur für das erste Geschwister ihres Typs innerhalb seines übergeordneten Elements.

JavaScript-basierte Lösungen

1. :First-of-Type-Emulation

Mit JavaScript können wir diese Funktionalität erreichen, indem wir eine benutzerdefinierte Klasse „First-of-Type“ einführen und die querySelector()-Methode verwenden, um den ersten Abgleich abzurufen Element des gewünschten Typs. Anschließend weisen wir diese benutzerdefinierte Klasse dem abgerufenen Element zu:

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

2. Benutzerdefinierte Matching-Funktion

Wir können auch eine benutzerdefinierte JavaScript-Funktion entwickeln, um das erste Vorkommen eines bestimmten Elementtyps zu identifizieren und zu formatieren:

function nthIndexOfType(element, index) {
  var siblings = element.parentElement.children;
  var count = 1;
  for (var i = 0; i < siblings.length; i++) {
    if (siblings[i].tagName === element.tagName) {
      if (count === index) {
        return siblings[i];
      }
      count++;
    }
  }
  return null;
}

nthIndexOfType(document.querySelector('p'), 1).style.backgroundColor = 'pink';

Diese Funktion akzeptiert zwei Parameter: das Element nach dem wir suchen möchten, und den Index des Vorkommens, auf das wir abzielen möchten. Es durchläuft alle Geschwisterelemente und gibt das erste Element des angegebenen Typs zurück, wobei der gewünschte Stil angewendet wird.

Das obige ist der detaillierte Inhalt vonWie formatiere ich die erste Instanz eines Elementtyps in HTML mithilfe von CSS oder JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!