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

我不知道为什么下面不起作用。我试图在outer table的第一个tr和第二个td上应用color:red样式。css - 立即第1 tr第2 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>

来源

2017-06-21 HockChai Lim

因为在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> \t 
 
    </td> 
 
    <td> 
 
     outer table 1st tr 2nd td -- Only want this Red 
 
    </td> 
 
    </tr> 
 
</table>

来源

2017-06-21 03:34:56 slashsharp

[进一步阅读至于为什么'tbody']（https://stackoverflow.com/questions/938083/why-do- browsers-insert-tbody-element-into-table-elements）自动生成 – justinw

@justinw这对于样式表颇有教育意义。我从来不知道'tbody'必须包含在样式中，即使它在'html'中被省略也是如此 – Swellar

的选择应该是#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> \t 
 
    </td> 
 
    <td> 
 
     outer table 1st tr 2nd td -- Only want this Red 
 
    </td> 
 
    </tr> 
 
</table> \t

来源

2017-06-21 03:36:56

.colorRed { 
 
    color: red; 
 
} 
 

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

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

那是因为你没有指定哪一部分应该只为红色。在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; 
}

来源

2017-06-21 03:47:23

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

回答

相关问题