Gestalten Sie die erste <td> -Spalte einer Tabelle anders

Wenn ich eine tablemit zwei Spalten habe, wie gebe ich eine paddingoder eine andere CSS an, damit sie nur für die erste Spalte von <td>s angewendet wird . Wie gestalte ich eine n-te Spalte ähnlich?

Sie können den n-ten untergeordneten Selektor verwenden .

Um auf das n-te Element abzuzielen, können Sie Folgendes verwenden:

td:nth-child(n) {  
  /* your stuff here */
}

(wo nbeginnt bei 1)

Wenn Sie IE7 unterstützen müssen, ist eine kompatiblere Lösung:

/* only the cells with no cell before (aka the first one) */
td {
    padding-left: 20px;
}
/* only the cells with at least one cell before (aka all except the first one) */
td + td {
    padding-left: 0;
}

Funktioniert auch gut mit li; Der allgemeine Geschwister-Selektor ~eignet sich möglicherweise besser für gemischte Elemente wie eine Überschrift h1, gefolgt von Absätzen UND einer Unterüberschrift und dann wieder anderen Absätzen.

Mit den Pseudoklassen: nth-child () und : nth-of-type () können Sie Elemente mit einer Formel auswählen.

Die Syntax lautet : n-tes Kind (an + b) , wobei Sie a und b durch Zahlen Ihrer Wahl ersetzen.

Zum Beispiel: n-tes Kind (3n + 1) wählt das 1., 4., 7. usw. Kind aus.

td:nth-child(3n+1) {  
  /* your stuff here */
}

: nth-of-type () funktioniert genauso, außer dass nur Elemente des angegebenen Typs berücksichtigt werden (im Beispiel).

Das sollte helfen. Es ist CSS3: Erstes Kind, wo Sie sagen sollten, dass das erste trder Tabelle, die Sie stylen möchten. http://reference.sitepoint.com/css/pseudoclass-firstchild

Mit dieser Syntax können Sie die erste Spalte einer Tabelle auswählen

tr td:nth-child(1n + 2){
  padding-left: 10px;
}