更改表的第一<td>列的样式

77

如果我有一个table包含两列的，我如何指定apadding或任何其他CSS以便仅将其应用于<td>s的第一列。另外，我如何样式化第n列？

css css-selectors padding

— 沙林
source

1

quirksmode.org/css/selectors/firstchild.html - quirksmode.org/css/selectors/nthchild.html

— techfoobar

160

您可以使用第n个子选择器。

定位第n个元素，然后可以使用：

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

（n从1开始）

— 瑞克什
source

22

建议使用td：first-child，主要是因为它对较旧的IE版本具有更多支持。如果浏览器支持不是问题，那么nth-child是一个强大的选择器。

— lukek

6

是的，对于第一个元素，first-child效果更好。但是OP要求两者都使用:)

— RRikesh 2013年

15

而n从1开始，而不是为0

— robsch

11

如果必须支持IE7，则更兼容的解决方案是：

/* 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;
}

也可以和li; 一般的同级选择器~可能更适合混合元素，例如标题h1，后跟段落AND子标题，然后是其他段落。

— 费利佩·阿尔斯
source

7

的：第n个孩子（）和：第n的类型（）伪类允许用户选择与一个式元件。

语法为：nth-child（an + b），其中您用选择的数字替换a和b。

例如，：nth-child（3n + 1）选择第1个，第4个，第7个等。

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

：nth-of-type（）的工作原理相同，只是它仅考虑给定类型的元素（在示例中）。

— 易卜拉欣女士
source

4

这应该有所帮助。它的CSS3：first-child，您应该在其中说出tr要设置样式的表的第一个。http://reference.sitepoint.com/css/pseudoclass-firstchild

— 天堂
source

3

此外，如果你想只风格第一tr特定表，你可以把.tableclass tr:first-child或#tableid tr:first-child

— 天堂

1

:first-child在CSS3中不是新手。

— BoltClock

1

要选择表的第一列，可以使用以下语法

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

— Saptarshi Banerjee
source