以不同的方式设置表格的第一个 <td> 列

Posted 2023-03-06

【中文标题】以不同的方式设置表格的第一个 <td> 列

【英文标题】：Style the first <td> column of a table differently

【发布时间】：2013-03-18 11:50:03

【问题描述】：

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

【问题讨论】：

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

【参考方案1】：

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

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

【参考方案2】：

您可以使用n-th child selector。

定位你可以使用的第 n 个元素：

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

（其中n 从 1 开始）

【讨论】：

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

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

而n 以 1 开头，而不是 0。

【参考方案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() 的工作原理相同，只是它只考虑给定类型的元素（在示例中）。

【参考方案4】：

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

【参考方案5】：

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

【讨论】：

另外，如果您只想设置特定表格的第一个 tr 的样式，您可以输入 .tableclass tr:first-child 或 #tableid tr:first-child

:first-child 对 CSS3 来说并不陌生。