Verwenden Sie den Pseudoklassenselektor :first-of-type, um den Stil des ersten Elements desselben Typs auszuwählen

Der First-of-Type-Pseudoklassenselektor in CSS kann verwendet werden, um das erste Element desselben Typs auszuwählen und zu formatieren. Dieser Selektor kann für mehrere Tag-Elemente wie p, div, span usw. verwendet werden.

Hier ist ein konkreter Beispielcode:

HTML-Code:

<div class="container">
  <h1>标题1</h1>
  <p>第一段文字</p>
  <p>第二段文字</p>
  <h2>标题2</h2>
  <p>第三段文字</p>
  <p>第四段文字</p>
</div>

CSS-Code:

p:first-of-type {
  font-weight: bold;
}

Im obigen Code haben wir das erste p-Tag-Element ausgewählt und auf Fett gesetzt. Das Ergebnis wird im Browser angezeigt und der erste Textabsatz wird fett gesetzt.

Ähnlich können wir auch den First-of-Type-Selektor verwenden, um das erste von anderen Tag-Elementen auszuwählen. Zum Beispiel:

h1:first-of-type {
  font-size: 24px;
}

Hier wählen wir das erste h1-Tag-Element aus und stellen seine Schriftgröße auf 24 Pixel ein.

Es ist zu beachten, dass mit dem First-of-Type-Selektor nur das erste Element desselben Typs ausgewählt werden kann. Wenn wir das erste Element aus verschiedenen Elementtypen auswählen möchten, können wir :first-child verwenden.

Kurz gesagt, mit dem Pseudoklassenselektor „First of Type“ kann sehr bequem ein bestimmter Stil für das erste Element desselben Typs festgelegt werden.

Das obige ist der detaillierte Inhalt vonVerwenden Sie den Pseudoklassenselektor :first-of-type, um den Stil des ersten Elements desselben Typs auszuwählen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!