如何将行的第一列变为黑色，第二列变为红色

Question

我想给一行添加一个CSS类，使第一列为黑色，第二列为红色。 我不想使用colgroup，因为这是针对一行特定的操作，而不是整个表格应该受到影响。

- rematnarab

---

你能不能给每个单元格分配一个类，并使用CSS样式来设置它们的样式？ - AlexKempton

Answer 1

你可以使用：

你可以使用：

td { color: black; }
td:nth-child(2) { color: red; }

- Qtax

---

这是为了更好的浏览器支持而不使用CSS3也是可能的。 - Smamatti

@Qtax，那么每个奇数行的第二列呢？需要嵌套吗？tr:nth-child(even) { td:nth-child(2) { color: red; }} - 3kstc

Answer 2

这是可以在不使用CSS3的情况下实现的！

示例
http://jsfiddle.net/Q3yu5/1/

CSS

tr.special_row td {
    background-color: #000;
}

tr.special_row td + td {
    background-color: #f00;
}

tr.special_row td+td+td {
    background-color: #fff;
}

HTML

<table>
<tr class="special_row">
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
</tr>
</table>

- Smamatti

---

恐怕这不是 @rematnarab 正在寻找的内容。我没有想到，不是整个表格都应该受到影响。将 tr 编辑为更具体的规则。 - Smamatti

只是一句话：我需要你的之前的代码版本。+1 用于审核日志！ - Michel Ayres

Answer 3

……这是一种针对特定行的操作，不应影响整个表格。

然后，对给定行的第一列和第二列应用不同的样式可能会很有用：

<style type="text/css">
    td.first
    {
        background-color: black;
        color: white;
    }
    td.second
    {
        background-color: red;
        color: white;
    }
</style>
<table>
    <tr>
        <td class="first">1st row, 1st column</td>
        <td class="second">1st row, 2nd column</td>
    </tr>
    <tr>
        <td>2nd row, 1st column</td>
        <td>2nd row, 2nd column</td>
    </tr>
</table>

- Juvanis

---

+1 哎呀，你是对的！ --> 不应该影响整个表格 - Smamatti

Answer 4

CSS3中，您可以使用:nth-child()伪类。

请参阅文档以了解如何使用它。
此外，自2019年初以来，几乎没有理由不使用CSS3选择器。

- m02ph3u5

Answer 5

你需要创建两种类型的CSS。
对于每一行，你可以添加你想要的CSS。

- Ofer

---

1/ 你指的是哪种类型的CSS？是指CSS规则吗？ 2/ 你是说要在每行的前两个单元格上添加样式属性吗？最好在可能的情况下（而且这里是可能的），将CSS与HTML分开。 - FelipeAls

确切地说，这个 CSS 可以在将来重复使用。 - Ofer