css - 即時第1 tr第2 tdは動作しません

Question

私は以下の理由で動作していないか分かりません。 outer tableの最初のtrと2番目のtdにcolor:redスタイルを適用しようとしています。

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

Answer 3

.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に追加します。 CSSで

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

これを追加：

.colorRed{ 
color: red; 
}