Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Implementieren Sie verschiedene Anwendungsszenarien des CSS-Pseudoklassenselektors :nth-last-child

PHPz
Freigeben: 2023-11-20 13:53:24
Original
1197 Leute haben es durchsucht

实现CSS :nth-last-child伪类选择器的各种应用场景

Um verschiedene Anwendungsszenarien von CSS zu implementieren: Pseudoklassenselektor für das n-te Kind, sind spezifische Codebeispiele erforderlich

In CSS gibt es viele Pseudoklassenselektoren, die uns dabei helfen können, HTML-Elemente genauer auszuwählen und zu formatieren . Unter diesen ist der Pseudoklassenselektor :nth-last-child ein sehr leistungsfähiger und praktischer Selektor, der bestimmte Elemente basierend auf ihrer Position im übergeordneten Element auswählen kann. In diesem Artikel werden wir verschiedene Anwendungsszenarien des Pseudoklassenselektors „nth-last-child“ untersuchen und spezifische Codebeispiele bereitstellen.

  1. Wählen Sie das letzte untergeordnete Element aus.

Verwenden Sie:nth-last-child(1), um das letzte untergeordnete Element im übergeordneten Element auszuwählen. Hier ist ein Beispiel:

HTML-Code:

<div class="parent">
  <div>第一个元素</div>
  <div>第二个元素</div>
  <div>第三个元素</div>
  <div>第四个元素</div>
</div>
Nach dem Login kopieren
Nach dem Login kopieren

CSS-Code:

.parent div:nth-last-child(1) {
  color: red;
}
Nach dem Login kopieren

Verwenden Sie im obigen Code den Selektor :nth-last-child(1), um das letzte untergeordnete Element im übergeordneten Element auszuwählen. Die Farbe ist auf Rot gesetzt.

  1. Wählen Sie das vorletzte untergeordnete Element aus.

Verwenden Sie:nth-last-child(2), um das vorletzte untergeordnete Element im übergeordneten Element auszuwählen. Hier ist ein Beispiel:

HTML-Code:

<div class="parent">
  <div>第一个元素</div>
  <div>第二个元素</div>
  <div>第三个元素</div>
  <div>第四个元素</div>
</div>
Nach dem Login kopieren
Nach dem Login kopieren

CSS-Code:

.parent div:nth-last-child(2) {
  color: blue;
}
Nach dem Login kopieren

Verwenden Sie im obigen Code den Selektor :nth-last-child(2), um das vorletzte untergeordnete Element im übergeordneten Element auszuwählen , und seine Farbe ist auf Blau eingestellt.

  1. Wählen Sie das vorletzte untergeordnete Element aus.

Verwenden Sie:nth-last-child(n+3):nth-last-child(-n+1), um das drittletzte untergeordnete Element auszuwählen vom übergeordneten Element bis zum letzten untergeordneten Element. Hier ist ein Beispiel:

HTML-Code:

<div class="parent">
  <div>第一个元素</div>
  <div>第二个元素</div>
  <div>第三个元素</div>
  <div>第四个元素</div>
  <div>第五个元素</div>
</div>
Nach dem Login kopieren
Nach dem Login kopieren

CSS-Code:

.parent div:nth-last-child(n+3):nth-last-child(-n+1) {
  color: orange;
}
Nach dem Login kopieren

Verwenden Sie im obigen Code :nth-last-child(n+3):nth-last-child(-n+1) Selection The Der Selektor wählt das drittletzte untergeordnete Element im übergeordneten Element aus und setzt seine Farbe auf Orange.

  1. Untergeordnete Elemente an ungeraden Positionen auswählen

Mit Hilfe des Selektors :nth-last-child(odd) können wir untergeordnete Elemente an ungeraden Positionen auswählen. Hier ist ein Beispiel:

HTML-Code:

<div class="parent">
  <div>第一个元素</div>
  <div>第二个元素</div>
  <div>第三个元素</div>
  <div>第四个元素</div>
  <div>第五个元素</div>
</div>
Nach dem Login kopieren
Nach dem Login kopieren

CSS-Code:

.parent div:nth-last-child(odd) {
  background-color: lightgray;
}
Nach dem Login kopieren

Verwenden Sie im obigen Code den Selektor :nth-last-child(odd), um die untergeordneten Elemente an ungeraden Positionen im übergeordneten Element auszuwählen und auszuwählen Die Hintergrundfarbe ist auf Hellgrau eingestellt.

In diesem Artikel haben wir gelernt, wie man den Pseudoklassenselektor :nth-last-child verwendet, um verschiedene Anwendungsszenarien zu implementieren. Dieser Pseudoklassenselektor ist in der tatsächlichen Entwicklung sehr nützlich und sehr praktisch, wenn es um bestimmte Layout- und Stilanforderungen geht. Durch die Kombination verschiedener Parameter können wir unterschiedliche Positionen des Zielelements auswählen und komplexere Styling-Effekte erzielen.

Ich hoffe, dieser Artikel kann Ihnen helfen, den Pseudoklassenselektor :nth-last-child in CSS sowie seine verschiedenen Anwendungsszenarien besser zu verstehen und zu lernen. Ich wünsche Ihnen bessere Ergebnisse mit CSS-Styling!

Das obige ist der detaillierte Inhalt vonImplementieren Sie verschiedene Anwendungsszenarien des CSS-Pseudoklassenselektors :nth-last-child. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage