html - 在表格中选择特定的 tr 元素 (CSS)

Question

我正在尝试选择 5% tr，但我的 css 选择器似乎不起作用。我还必须为 10% tr 编写一个，我希望在 5% tr 解决后会很简单。我的选择器似乎适用于 table，但我无法让它选择第二个 tr。我做错了什么？

代码:

body > form > div > table > tr:nth-child(2) > td:first-child {
  background-color: red
}

<form method="post">
  <div>
    <table cellpadding="0" align="center" cellspacing="0" border="0">
      <tr>
        <td colspan="3">
          &nbsp;
        </td>
      </tr>
      <tr>
        <td style="width: 5%">
          5%
        </td>
        <td>
          <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%; border-color: #e0e0e0;">
            <tr>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td width="10%" valign="top" style="height: 100%;">10%</td>

              <td valign="top" width="90%">
                My Content
              </td>
            </tr>
          </table>
      </tr>
    </table>
  </div>
</form>

Answer 1

如果您不想更改您的 HTML 标记，这意味着添加类(这将更容易定位 TR 和 TD ) 你可以使用 :nth-of-type

片段

tr:nth-of-type(2) {
  background: red
}
table table tr:nth-of-type(2) td:first-of-type{
  background: lightblue
}

<table cellpadding="0" align="center" cellspacing="0" border="0">
      <tr>
        <td colspan="3">
          &nbsp;
        </td>
      </tr>
      <tr>
        <td style="width: 5%">
          5%
        </td>
        <td>
          <table width="100%" border="0" cellspacing="0" cellpadding="0" style="height: 100%; border-color: #e0e0e0;">
            <tr>
              <td colspan="2"></td>
            </tr>
            <tr>
              <td width="10%" valign="top" style="height: 100%;">10%</td>

              <td valign="top" width="90%">
                My Content
              </td>
            </tr>
          </table>
      </tr>
    </table>