css - 立即第1 tr第2 td不工作

Question

我不确定为什么以下不起作用。我正试图在color:red的第一个outer table和第二个tr上应用td样式。

table,
tr,
td {
  border: 1px black solid;
}

#outerTable>tr:first-child>td:nth-child(2) {
  color: red;
}

<table id="outerTable">
  <tr>
    <td>
      outer table 1st tr 1st td
      <table>
        <tr>
          <td>
            inner table 1st tr 1st td
          </td>
          <td>
            inner table 1tr 2nd td
          </td>
        </tr>
      </table>
    </td>
    <td>
      outer table 1st tr 2nd td -- Only want this Red
    </td>
  </tr>
</table>

Answer 1

因为在DOM中有一个tbody标记。 将您的代码更改为

#outerTable > tbody > tr:first-child > td:nth-child(2) {

table, tr, td {
border:1px black solid;  
}

#outerTable > tbody > tr:first-child > td:nth-child(2) {
  color:red;
}

<table id="outerTable">
  <tr>
    <td>
      outer table 1st tr 1st td
      <table>
        <tr>
          <td>
            inner table 1st tr 1st td
          </td>
          <td>
            inner table 1tr 2nd td
          </td>
        </tr>
      </table>	
    </td>
    <td>
      outer table 1st tr 2nd td -- Only want this Red
    </td>
  </tr>
</table>

Answer 2

选择器应为#outerTable > tbody > tr:first-of-type > td:nth-child(2)

table, tr, td {
border:1px black solid;  
}

#outerTable > tbody > tr:first-of-type > td:nth-child(2) {
  color:red;
}

<table id="outerTable">
  <tr>
    <td>
      outer table 1st tr 1st td
      <table>
        <tr>
          <td>
            inner table 1st tr 1st td
          </td>
          <td>
            inner table 1tr 2nd td
          </td>
        </tr>
      </table>	
    </td>
    <td>
      outer table 1st tr 2nd td -- Only want this Red
    </td>
  </tr>
</table>	

Answer 3

＆＃13;

＆＃13;

.colorRed {
  color: red;
}

table,
tr,
td {
  border: 1px black solid;
}

＆＃13;

<table id="outerTable">
  <tr>
    <td>
      outer table 1st tr 1st td
      <table>
        <tr>
          <td>
            inner table 1st tr 1st td
          </td>
          <td>
            inner table 1tr 2nd td
          </td>
        </tr>
      </table>
    </td>
    <td class="colorRed">
      outer table 1st tr 2nd td -- Only want this Red
    </td>

＆＃13;

＆＃13;

＆＃13;

这是因为你没有指定哪个部分应该只是红色。 在td上添加您希望文本颜色为红色的类名。

<table id="outerTable">
<tr>
<td>
  outer table 1st tr 1st td
  <table>
    <tr>
      <td>  
        inner table 1st tr 1st td
      </td>
      <td>
        inner table 1tr 2nd td
      </td>
    </tr>
  </table>  
</td>
<td class="colorRed">
  outer table 1st tr 2nd td -- Only want this Red
</td>

    

在CSS中添加：

.colorRed{
 color: red;
}