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不工作

回答

相關問題