Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Verwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente auszuwählen, deren Position größer oder gleich 3 ist

王林
Freigeben: 2023-11-20 11:20:34
Original
902 Leute haben es durchsucht

Verwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente auszuwählen, deren Position größer oder gleich 3 ist

Verwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente mit Positionen größer oder gleich 3 auszuwählen. Die spezifischen Codebeispiele lauten wie folgt:

HTML-Code:

<div id="container">
  <div class="item">第一个子元素</div>
  <div class="item">第二个子元素</div>
  <div class="item">第三个子元素</div>
  <div class="item">第四个子元素</div>
  <div class="item">第五个子元素</div>
  <div class="item">第六个子元素</div>
  <div class="item">第七个子元素</div>
</div>
Nach dem Login kopieren

CSS-Code:

.item:nth-child(n+3) {
  color: red;
}
Nach dem Login kopieren

Erläuterung:
Im obigen Code verwenden wir den Selektor nth-child(n+3), um untergeordnete Elemente auszuwählen, deren Position größer oder gleich 3 ist, und legen die Textfarbe dieser untergeordneten Elemente fest zu rot.

:nth-child(n+3) Pseudoklassenselektor bedeutet, untergeordnete Elemente auszuwählen, deren Position größer oder gleich 3 ist. Unter diesen steht n für eine beliebige natürliche Zahl und +3 für das Zählen ab dem 3. Unterelement.

Im obigen Code setzen wir die ID des Containerelements auf „Container“ und den Klassennamen des untergeordneten Elements auf „item“. Verwenden Sie dann CSS, um die Textfarbe von untergeordneten Elementen größer oder gleich Position 3 auf Rot zu setzen.

Ergebnis:
Gemäß dem obigen Code wird die Textfarbe des dritten untergeordneten Elements, des vierten untergeordneten Elements, des fünften untergeordneten Elements und der nachfolgenden untergeordneten Elemente auf Rot gesetzt, während die Textfarbe der ersten beiden untergeordneten Elemente dies tut bleiben standardmäßig bestehen.

Mit dem Pseudoklassenselektor nth-child(n+3) können Sie problemlos untergeordnete Elemente mit Positionen größer oder gleich 3 auswählen und ihre Stile entsprechend festlegen. Dies ist bei bestimmten Layoutanforderungen sehr nützlich und kann uns dabei helfen, bessere Seiteneffekte zu erzielen.

Das obige ist der detaillierte Inhalt vonVerwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente auszuwählen, deren Position größer oder gleich 3 ist. 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