如何选择表格中的元素，但该表格中的子表格中没有任何元素？

Question

我已经搜索和搜索，但似乎无法弄清楚为什么这是行不通的。

目标：为第一个表中的第一个td设置背景色为红色，而不为第二个表设置任何背景色。

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