Wie wähle ich einen Bereich von Elementen mit CSS nth-child aus?

Verbesserung der CSS-Selektoren für den n-ten Bereich

Der n-te-Kind-Selektor in CSS ermöglicht eine präzise Auswahl von Elementen basierend auf ihrer Position innerhalb eines übergeordneten Elements. Es kann jedoch schwierig sein, diesen Selektor auf Bereiche anzuwenden, die nicht durch eine bestimmte Zahl definiert sind.

Bereichsauswahl für das n-te Kind erweitern

Berücksichtigen Sie den folgenden CSS-Selektor:

<code class="css">.myTableRow td:nth-child(?){
  background-color: #FFFFCC;
}</code>

Dieser Selektor zielt darauf ab, eine Hintergrundfarbe auf eine Reihe von Elemente innerhalb eines mit der Klasse „myTableRow“. Der Fragezeichen-Platzhalter (?) lässt den Bereich jedoch undefiniert.

Um diesen Selektor auf anzuwenden; In den Spalten 2 bis 4 können Sie das folgende CSS verwenden:

<code class="css">.myTableRow td:nth-child(n+2):nth-child(-n+4){
    background-color: #FFFFCC;
}</code>

Grundlegendes zum erweiterten Selektor

Dieser Selektor verwendet zwei zusätzliche Unterselektoren für das n-te Kind:

• :nth-child(n 2): Wählt alle Kinder ab der 2. Position aus.
• :nth-child(-n 4): Wählt alle Kinder bis zur 4. Position aus.

Durch die Kombination dieser beiden Unterselektoren erstellen wir effektiv einen Bereich, der Elemente von der 2. bis zur 4. Position umfasst.

Beispielverwendung

Betrachten Sie die folgende HTML-Tabelle:

<code class="html"><table>
  <tr class="myTableRow">
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
    <td>column 4</td>
    <td>column 5</td>
  </tr>
</table></code>

Die Anwendung des erweiterten CSS-Selektors auf diese Tabelle führt dazu, dass eine Hintergrundfarbe auf die 2., 3. und 4. Elemente innerhalb der „myTableRow“ . Dies liegt daran, dass diese Elemente im definierten Bereich von 2 bis 4 liegen.

Das obige ist der detaillierte Inhalt vonWie wähle ich einen Bereich von Elementen mit CSS nth-child aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!