Verwenden Sie den Pseudoklassenselektor :nth-of-type, um Stile an bestimmten Positionen innerhalb von Elementen desselben Typs auszuwählen.

Verwenden Sie den Pseudoklassenselektor :nth-of-type, um den Stil einer bestimmten Position in Elementen desselben Typs auszuwählen.

In CSS müssen wir häufig Stile für bestimmte Positionen in Elementen desselben Typs festlegen , wie z. B. Listen. Jedes dritte Element in erfordert einen speziellen Stil. In diesem Fall kann für diesen Zweck der :nth-of-type-Pseudoklassenselektor verwendet werden.

: Der Pseudoklassenselektor vom n-ten Typ kann Zielelemente basierend auf ihrem Typ und ihrer Position auswählen. Die Syntax lautet wie folgt:

:nth-of-type(n)

wobei n ein Parameter ist, der die Position angibt, bei der es sich beispielsweise um eine bestimmte Zahl oder ein Schlüsselwort handeln kann eine gleichmäßige Position.

Hier ist ein konkretes Beispiel:

HTML-Code:

<ul>
  <li>第一个元素</li>
  <li>第二个元素</li>
  <li>第三个元素</li>
  <li>第四个元素</li>
  <li>第五个元素</li>
  <li>第六个元素</li>
  <li>第七个元素</li>
  <li>第八个元素</li>
</ul>

CSS-Code:

li:nth-of-type(3n) {
  color: red;
}

Im obigen Code verwenden wir den :nth-of-type(3n)-Selektor, um jedes dritte Element in der Liste auszuwählen, und Stellen Sie die Farbe auf Rot ein. Gemäß den Regeln dieses Selektors wird dieser Stil auf das dritte, sechste und neunte Element angewendet.

Wenn wir Elemente an ungeraden Positionen auswählen möchten, können wir den Selektor :nth-of-type(odd) verwenden. Der Beispielcode lautet wie folgt:

CSS-Code:

li:nth-of-type(odd) {
  background-color: lightgray;
}

Auf diese Weise wird die Hintergrundfarbe von Die Elemente an ungeraden Positionen in der Liste werden auf Hellgrau gesetzt.

Neben der Anwendung des :nth-of-type-Selektors in Listen kann er auch für andere Arten von Elementen wie Absätze, Titel usw. verwendet werden.

Kurz gesagt kann die Verwendung des Pseudoklassenselektors „:nth-of-type“ den Zweck erreichen, bestimmte Positionen in Elementen desselben Typs zu formatieren. Durch die Festlegung spezifischer Parameter können wir den gewünschten Ort auswählen und ihm einen bestimmten Stil verleihen. Dies ist sehr nützlich, wenn es um die Gestaltung einer großen Anzahl ähnlicher Elemente geht, und verbessert die Entwicklungseffizienz.

Das obige ist der detaillierte Inhalt vonVerwenden Sie den Pseudoklassenselektor :nth-of-type, um Stile an bestimmten Positionen innerhalb von Elementen desselben Typs auszuwählen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!