Wie wähle und style ich Elemente der ersten spezifischen Klasse mit CSS und JavaScript?

Genau manipulieren CSS und JavaScript: Stil das erste spezifische Klassenelement stylen

In der Webentwicklung ist es häufig notwendig, das erste Element einer bestimmten Kategorie zu stylen. Beispielsweise hat die Seite mehrere Elemente mit class = "rot", aber nur das erste Element wird voraussichtlich rot erscheinen. Dieser Artikel zeigt, wie dies mit CSS und JavaScript erreicht werden kann.

Beispiel für HTML -Struktur:

Der folgende HTML -Code enthält multiple class = "Red" Elemente:

<div id="test">
  <span>Ich bin Spannweite</span>
  <h1 id="Ich-bin-H-setze-einfach-meinen-Stil-auf-rot">Ich bin H1, setze einfach meinen Stil auf rot</h1>
  <h1 id="Ich-bin-H">Ich bin H1</h1>
  <h1 id="Ich-bin-H">Ich bin H1</h1>
  <h1 id="Ich-bin-H">Ich bin H1</h1>
</div>

Methode 1: JavaScript -Implementierung

JavaScripts document.querySelector() -Methode kann einfach das erste Übereinstimmungselement auswählen. Der folgende Code legt die Farbe des First Class = "Red" -Elements auf rot fest:

 document.querySelector ('. rot'). style.color = 'rot';

Methode 2: CSS -Implementierung

Der :nth-child() Pseudo-Klasse-Selektor von CSS kann gemäß der Reihenfolge der Elemente ausgewählt werden. In Kombination mit dem of kann das erste Element in einer bestimmten Klasse genau ausgewählt werden.

 .Red: n-Kind (1 von .red) {
  Farbe: Rot;
}

Um das letzte Klasse "Red" zu stylen, können Sie die Pseudoklasse :nth-last-child() verwenden:

 .Red: N-te-last-Kind (1 von .Red) {
  Farbe: Blau;
}

Kompatibilitätsbeschreibung: Es ist zu beachten, dass :nth-child(n of selector) und :nth-last-child(n of selector) einige Probleme mit der Browserkompatibilität haben können. In einigen älteren Browsern funktioniert diese Methode möglicherweise nicht richtig. Die ausgewählte Methode hängt daher von den Browser -Kompatibilitätsanforderungen des Projekts ab. Wenn die Kompatibilität kritisch ist, sind JavaScript -Methoden im Allgemeinen zuverlässiger.

Zusammenfassung: Sowohl JavaScript als auch CSS können die Stileinstellung des ersten Elements einer bestimmten Klasse implementieren. Entwickler sollten die am besten geeignete Methode basierend auf den tatsächlichen Projektanforderungen und den Überlegungen zur Kompatibilität des Browsers auswählen.

Das obige ist der detaillierte Inhalt vonWie wähle und style ich Elemente der ersten spezifischen Klasse mit CSS und JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!