Question

我试图选择5％tr，但我的css选择器似乎不起作用。我还必须为10％tr编写一个，我希望在5％tr解决后很简单。我的选择器似乎可以使用table，但我无法选择第二个tr。我做错了什么？

代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

如果您 NOT 想要更改HTML标记，意味着添加类（更容易定位TR和TD），您可以使用{{ 3}}

段

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

使用以下CSS定位：

tr[width="10%"]{

}

Answer 3

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

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

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

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

Answer 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>

选择表中的特定tr元素（CSS）

4 个答案:

段