Heim > Web-Frontend > CSS-Tutorial > Wie ziele ich mit CSS-Selektoren auf einen bestimmten Spaltenbereich in einer Tabelle ab?

Wie ziele ich mit CSS-Selektoren auf einen bestimmten Spaltenbereich in einer Tabelle ab?

Barbara Streisand
Freigeben: 2024-10-27 18:41:01
Original
311 Leute haben es durchsucht

How to Target a Specific Column Range in a Table Using CSS Selectors?

CSS-Selektor für einen bestimmten Spaltenbereich

Diese Frage befasst sich mit der Notwendigkeit, einen CSS-Selektor so anzupassen, dass er auf einen bestimmten Spaltenbereich in angewendet wird ein Tisch. Der ursprüngliche Selektor, .myTableRow td:nth-child(?), zielt auf ein bestimmtes untergeordnetes Element basierend auf seiner Position in der Tabellenzeile ab. Die Frage sucht jedoch nach einer Möglichkeit, den Selektor auf die Spalten 2 bis 4 anzuwenden.

Wie in der Antwort vorgeschlagen, besteht ein Ansatz darin, den folgenden Selektor zu verwenden:

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

Dieser Selektor zielt auf alle Tabellenzellen (td), die das 2. Kind oder später und bis zum 4. Kind innerhalb von Zeilen mit der Klasse myTableRow sind. Dadurch wird effektiv der gewünschte Spaltenbereich ausgewählt.

Ein weiterer Vorteil dieses Ansatzes ist seine Robustheit, da er nicht an die Gesamtzahl der Spalten in der Tabelle gebunden ist. Es funktioniert unabhängig davon, wie viele Spalten vorhanden sind.

Erklärung der Selektorsyntax:

  • :nth-child(n X): Wählt alle Kinder aus ab der X-ten Position.
  • :nth-child(-n ein bestimmter Bereich, wie im bereitgestellten Codebeispiel dargestellt.

Das obige ist der detaillierte Inhalt vonWie ziele ich mit CSS-Selektoren auf einen bestimmten Spaltenbereich in einer Tabelle ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage