CSS 如何选择非第一个tr和非最后一个td

在本文中，我们将介绍如何使用CSS选择器来选择非第一个<tr>和非最后一个<td>元素。这对于对表格中间行和列应用样式或效果时特别有用。

阅读更多：CSS 教程

选择非第一个tr

要选择非第一个<tr>元素，我们可以使用:not()伪类结合:first-child伪类。:not()伪类用于选择不符合特定选择器的元素。

tr:not(:first-child) {
  /* CSS样式 */
}

示例HTML代码：

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
  <tr>
    <td>Row 3, Column 1</td>
    <td>Row 3, Column 2</td>
    <td>Row 3, Column 3</td>
  </tr>
  <tr>
    <td>Row 4, Column 1</td>
    <td>Row 4, Column 2</td>
    <td>Row 4, Column 3</td>
  </tr>
</table>

在上面的示例中，我们选择了除第一个<tr>以外的所有<tr>元素，并可以为其应用样式。

选择非最后一个td

要选择非最后一个<td>元素，我们可以使用:not()伪类结合:last-child伪类。:last-child伪类用于选择作为其父元素最后一个子元素的元素。

td:not(:last-child) {
  /* CSS样式 */
}

示例HTML代码：

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
  <tr>
    <td>Row 3, Column 1</td>
    <td>Row 3, Column 2</td>
    <td>Row 3, Column 3</td>
  </tr>
  <tr>
    <td>Row 4, Column 1</td>
    <td>Row 4, Column 2</td>
    <td>Row 4, Column 3</td>
  </tr>
</table>

在上面的示例中，我们选择了除每行最后一个<td>以外的所有<td>元素，并可以为其应用样式。

总结

通过使用CSS的:not()伪类结合:first-child和:last-child伪类，我们可以选择非第一个<tr>和非最后一个<td>元素，并为其应用特定的样式。这在表格的样式设计中非常有用，可以灵活地对表格中的中间行和列进行样式处理。通过灵活运用CSS选择器，我们可以更好地控制元素的外观和行为。