テーブル内の要素はどのように選択されますが、そのテーブル内のサブテーブル内の要素はありません。

Question

私は検索して検索しましたが、なぜこれが機能していないのかわかりません。

目標：最初の表の最初のtdの背景色を赤に設定し、2番目の表の背景色は設定しません。

#table1 > tr > td:nth-child(1) 
 
{ 
 
    background-color: red; 
 
} 
 

 
/*Ignore this*/ 
 
table td{ 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
}

<table id='table1'> 
 
<tr> 
 
    <td>1</td> 
 
    <td>2 
 
    
 
    <table> 
 
     <tr> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     </tr> 
 
    </table> 
 
    
 
    </td> 
 
</tr> 
 
</table>

Answer 1

#table1>tbody>tr>td:first-child 
 
{ 
 
    background-color: red; 
 
} 
 

 
table td{ 
 
    padding: 10px; 
 
}

<table id='table1' border=1> 
 
<tbody> 
 
<tr> 
 
    <td>1</td> 
 
    <td>2 
 
    
 
    <table border=1> 
 
     <tr> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     </tr> 
 
    </table> 
 
    
 
    </td> 
 
</tr> 
 
</tbody> 
 
</table>

Answer 2

<tbody>はそれを修正追加する（おかげでマイク！）

#table1 > tbody > tr > td:nth-child(1) 
 
{ 
 
    background-color: red; 
 
} 
 

 
/*Ignore this*/ 
 
table td{ 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
}

<table id='table1'> 
 
    <tbody> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2 
 

 
     <table> 
 
      <tbody> 
 
      <tr> 
 
       <td>3</td> 
 
       <td>4</td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 

 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>