CSS 如何选择行中的第一个和最后一个TD

在本文中，我们将介绍如何使用CSS选择器来选择行中的第一个和最后一个TD（表格单元格）。

阅读更多：CSS 教程

选择第一个TD

要选择行中的第一个TD，我们可以使用:first-child伪类选择器。这个伪类选择器选择了其父元素的第一个子元素。对于行中的第一个TD，我们可以将选择器设置为tbody tr td:first-child。

例如，考虑以下HTML表格：

<table>
  <tbody>
    <tr>
      <td>第一个TD</td>
      <td>第二个TD</td>
      <td>第三个TD</td>
    </tr>
    <tr>
      <td>第一个TD</td>
      <td>第二个TD</td>
      <td>第三个TD</td>
    </tr>
  </tbody>
</table>

要选择每行的第一个TD并将其背景颜色更改为红色，可以使用以下CSS代码：

tbody tr td:first-child {
  background-color: red;
}

这将选择每个行中的第一个TD并将其背景颜色更改为红色。

选择最后一个TD

要选择行中的最后一个TD，我们可以使用:last-child伪类选择器。这个伪类选择器选择了其父元素的最后一个子元素。对于行中的最后一个TD，我们可以将选择器设置为tbody tr td:last-child。

继续以上面的HTML表格示例，我们可以使用以下CSS代码选择每行的最后一个TD并将其背景颜色更改为绿色：

tbody tr td:last-child {
  background-color: green;
}

这将选择每个行中的最后一个TD并将其背景颜色更改为绿色。

选择第一个和最后一个TD

如果我们想同时选择行中的第一个和最后一个TD，并将它们的背景颜色更改为不同的颜色，我们可以使用:nth-child()伪类选择器。这个伪类选择器选择其父元素的特定子元素。

例如，要选择每行的第一个TD并将其背景颜色更改为红色，并选择每行的最后一个TD并将其背景颜色更改为蓝色，可以使用以下CSS代码：

tbody tr td:first-child {
  background-color: red;
}

tbody tr td:last-child {
  background-color: blue;
}

这将选择每个行中的第一个TD并将其背景颜色更改为红色，同时选择每个行中的最后一个TD并将其背景颜色更改为蓝色。

总结

在本文中，我们介绍了如何使用CSS选择器来选择行中的第一个和最后一个TD。我们使用:first-child伪类选择器选择了行中的第一个TD，使用:last-child伪类选择器选择了行中的最后一个TD，并使用:nth-child()伪类选择器同时选择了第一个和最后一个TD。通过使用这些选择器，我们能灵活地对表格的单元格进行样式设置，使其更具有可读性和美观性。

使用示例：