Wie ziele ich mit dem CSS-N-ten-Kind-Selektor auf bestimmte Elemente in einem Bereich ab?

CSS-Bereichsauswahl für n-te untergeordnete Elemente

Mit der Auswahl für n-te untergeordnete Elemente können Sie bestimmte Elemente innerhalb eines Containers basierend auf ihrer Position als Ziel auswählen. Berücksichtigen Sie bei der Anpassung für einen bestimmten Bereich die folgenden Ansätze:

nth-child(?):nth-child-X

Dieser Ansatz zielt auf Elemente aus einem bestimmten Bereich ab Position (z. B. nth-child(2)) bis zum Ende der Sequenz (z. B. nth-child-X):

.myTableRow td:nth-child(2):nth-child(-n+4){
  background-color: #FFFFCC;
}

nth-child(n X):nth-child(-n Y)

Dieser klarere Ansatz umfasst das Spezifische Bereichsnummern:

.myTableRow td:nth-child(n+2):nth-child(-n+4){
    background-color: #FFFFCC;
}

Hier wählt nth-child(n 2) alle Kinder ab Position 2 aus und nth-child(-n 4) wählt alle Kinder bis zur Position 4 aus.

nth-child(X-Y)

Diese Syntax zielt auf einen bestimmten Bereich ab, indem der Anfang subtrahiert wird Position ab der Endposition:

.myTableRow td:nth-child(2-4){
  background-color: #FFFFCC;
}

Denken Sie daran, die Gesamtzahl der Elemente zu berücksichtigen, wenn Sie den Selektor für das n-te Kind verwenden Vermeiden Sie unerwartete Ergebnisse.

Das obige ist der detaillierte Inhalt vonWie ziele ich mit dem CSS-N-ten-Kind-Selektor auf bestimmte Elemente in einem Bereich ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!