css - 以不同方式设置表格的第一列

Question

如果我有table两列，我如何指定 apadding或任何其他 css 以便它仅应用于<td>s 的第一列。另外，我如何类似地设置第 n列的样式？

Answer 1

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

以您可以使用的第 n 个元素为目标：

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

（n从 1 开始）

Answer 2

如果你必须支持 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 后跟段落和子标题，然后是其他段落。

Answer 3

: nth-child()和:nth-of-type()伪类允许您使用公式选择元素。

语法是:nth-child(an+b)，您可以将 a 和 b 替换为您选择的数字。

例如， :nth-child(3n+1) 选择第 1、4、7 个等孩子。

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

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

有关 nth-child 的更多信息 https://developer.mozilla.org/es/docs/Web/CSS/:nth-child

Answer 4

这应该会有所帮助。它的 CSS3 :first-child 你应该说tr你想要样式的表格的第一个。http://reference.sitepoint.com/css/pseudoclass-firstchild

Answer 5

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

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