在表格中选择特定的 tr 元素 (CSS)答案

【问题标题】：Selecting specific tr element in a table (CSS)在表格中选择特定的 tr 元素 (CSS)
【发布时间】：2017-01-12 19:15:16
【问题描述】：

我正在尝试选择 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>

【问题讨论】：

给它一个class。 w3schools.com/cssref/sel_class.asp
您可能会发现这个问题相关：stackoverflow.com/q/7510850/82548

标签： html css css-selectors

【解决方案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>

【讨论】：

加 1 来自我...没有理由有 2 个或多或少相同的答案 :)
知道了，所以我不应该使用 > 字符。我的内容在此解决方案中也有颜色，但我可以使用您的示例编写更精确的解决方案。谢谢你。编辑：我的错，当我应该说 td 时，我在原始帖子中说 tr。解决了这个问题-您的解决方案对我原来的问题是正确的。谢谢。
所以它对您的原始问题是正确的，您将另一个答案标记为已接受？需要解释一下吗？
两个答案都对我有用。我赞成你的回答。
仅供参考，如果您记得将 5% 更改为 6% 或 10% 更改为 9%，那么您选择的答案将不再有效，除非您更改它，所以不是这样有效:)

【解决方案2】：

使用以下 CSS 定位：

tr[width="10%"]{

}

【讨论】：

谢谢，这对我和我所采用的解决方案都有效，尽管其中许多解决方案都有效。
@tarun713 我很高兴它有帮助。

【解决方案3】：

给它一个类，这样你就可以直接选择它，而不必指定整个链：

<tr class="my-tr">
     <td style="width: 5%">
     ....
</tr>

然后你可以在css中选择它：

.my-tr {
    background-color:red;
}

【讨论】：

既然可以用纯 CSS 实现，为什么还要使用 JS？它甚至没有被标记为 JS 问题:)
@dippas 正确，我想展示如何在 CSS 中进行选择。不知道为什么我继续使用 JS :)
也许习惯会接管你:)
不幸的是，html是系统生成的，我只能在生成html后应用css！谢谢你的回复。我会投赞成票，因为对于确实可以访问 HTML 的人来说，这是一个有效的答案。

【解决方案4】：

使用nth-of-type 伪选择器。嵌套表很棘手，我使用td > table 找到它。你的第一个目标是background: red，第二个目标是outline:2px solid yellow

table {
  outline: 3px dashed blue;
  table-layout: fixed;
}
table:first-of-type {
  background: rgba(0, 0, 0, .3);
}
/* 1st target acquired */
table:first-of-type tr:nth-of-type(2) td:first-of-type {
  background: red;
}
form > div {
  height: 50vh;
  width: 90vw;
  outline: 1px solid black;
}
td > table {
  outline: 1px solid lime;
}
/* 2nd target acquired */
td > table tr:nth-of-type(2) td:first-of-type {
  outline: 2px solid yellow;
}

<html>

<head>
  <title>TestPage</title>
  <style type="text/css">
    /*body > form > div > table:first-of-type > tr:nth-child(2) > td:first-child { background-color:red };*/
  </style>
</head>

<body>
  <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>
          </td>
        </tr>
      </table>
    </div>
  </form>
</body>

</html>

【讨论】：