CSS 使用 CSS 选择器选择第二个表格的第二行

在本文中，我们将介绍如何使用 CSS 选择器选择第二个表格的第二行。

阅读更多：CSS 教程

选择第二个表格

要选择第二个表格，我们可以使用 :nth-of-type() 伪类选择器。该选择器可以选择指定类型的第 n 个元素。在这种情况下，我们可以选中 table 元素中的第二个表格。

table:nth-of-type(2) {
    /* 样式 */
}

上述代码将选中文档中第二个 table 元素，并可以对其应用相应的样式。

选择第二行

要选择第二行，我们可以使用 tr:nth-child() 伪类选择器。该选择器可以选择指定父元素的第 n 个子元素。在这种情况下，我们可以选中指定表格下的第二行。

table:nth-of-type(2) tr:nth-child(2) {
    /* 样式 */
}

上述代码将选中第二个表格中的第二行，并可以对其应用相应的样式。

示例

假设有以下 HTML 代码：

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td>内容4</td>
    <td>内容5</td>
    <td>内容6</td>
  </tr>
</table>

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td>内容1</td>
    <td>内容2</td>
    <td>内容3</td>
  </tr>
  <tr>
    <td>内容4</td>
    <td>内容5</td>
    <td>内容6</td>
  </tr>
</table>

如果我们希望对第二个表格的第二行进行样式设置，可以使用以下 CSS 代码：

table:nth-of-type(2) tr:nth-child(2) {
    background-color: yellow;
}

上述代码将第二个表格的第二行背景颜色设置为黄色。

总结

通过使用 CSS 选择器，我们可以选择第二个表格的第二行，并对其应用相应的样式。使用 :nth-of-type() 伪类选择第二个表格，然后使用 tr:nth-child() 伪类选择第二行。这样可以让我们更灵活地控制和美化网页中的表格元素。