Wie wähle ich bestimmte Spalten in einer Tabelle mithilfe von CSS-„nth-child“-Selektoren aus?

CSS-Selektoren für den n-ten Bereich

Um bestimmte Spalten in einer Tabelle auszuwählen, verwenden Sie den CSS-Selektor für das n-te Kind. Der bereitgestellte Selektor „.myTableRow td:nth-child(?)“ zielt auf Tabellendatenzellen (td) basierend auf ihrer Position in der übergeordneten Tabellenzeile ab. Der Fragezeichen-Platzhalter muss jedoch durch einen Bereich ersetzt werden.

N-te-Child-Bereichsauswahl

Um die Spalten 2 bis 4 auszuwählen, verwenden Sie einen dieser Ansätze:

Option 1:

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

Diese Syntax gewährleistet die Auswahl von Zellen von der 2. Position (n 2) bis zur 4. Position (-n 4).

Option 2 (klarere Syntax):

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

Diese Alternative bietet eine explizitere Bereichsangabe, die die Spalten 2 und 4 explizit identifiziert. Dadurch entfällt die Notwendigkeit, den zu berechnen Gesamtzahl der Spalten.

nth-Child-Syntaxerklärung:

• ':nth-child(n X)' zielt auf Elemente ab der 'X-ten' Position ab weiter.
• ':nth-child(-n 🎜>Bedenken Sie den folgenden HTML-Code:

Die Anwendung des Selektors „.myTable tr:nth-child(2)“ würde die zweite Zeile in der Tabelle hervorheben.

Das obige ist der detaillierte Inhalt vonWie wähle ich bestimmte Spalten in einer Tabelle mithilfe von CSS-„nth-child“-Selektoren aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!