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?
Antworten:
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)
first-childist es besser. Aber OP fragte nach beidem :)
nbeginnen Sie mit 1, nicht mit 0.
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
treines bestimmten Tisches .tableclass tr:first-child#tableid tr:first-child
:first-childist nicht neu in CSS3.
Mit dieser Syntax können Sie die erste Spalte einer Tabelle auswählen
tr td:nth-child(1n + 2){
padding-left: 10px;
}