<tr> 中第一个 <td> 的 CSS 样式答案

【问题标题】：CSS style for first <td> in a <tr><tr> 中第一个 <td> 的 CSS 样式
【发布时间】：2013-10-12 03:28:24
【问题描述】：

我正在尝试将我的

的所有元素设置为右对齐，但第一个元素除外，我希望它是左对齐的。我试过这个：

<style>
td { text-align: right };
td:first-child { text-align: left };
</style>

这使得所有单元格都右对齐。如果我交换这两行的顺序，那么所有单元格都是左对齐的。高度困惑。根据 w3schools，

:first-child 选择器用于选择指定的选择器，仅当它是其父级的第一个子级时。

但这似乎并没有发生在我身上。

【问题讨论】：

【解决方案1】：

您的语法不正确。

td { text-align: right };                    /* This was being applied */
td:first-child { text-align: left };         /* This wasn't.. */

应该是：

td { text-align: right; }
td:first-child { text-align: left; }

注意分号 - 它们不应位于方括号之外 {}

除此之外，您正确使用了:first-child。

【讨论】：

非常感谢，删除多余的分号后效果很好。
@Gargoyle 很高兴它有帮助。
如果存在带有行跨度的 td，它将无法正常工作。在这种情况下，第二列中的某些单元格将与规则完美匹配 td:first-child { text-align: left; }

【解决方案2】：

另一个选项，取决于你想做什么：

table tr td {
    background-color:red;}
table tr td:nth-child(1) {
    background-color:green;}

【讨论】：

【解决方案3】：

td:nth-child(2) { text-align: right; }

你可以在一行中做到这一点。

【讨论】：