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>

CSS-Code:

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

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!