html - メイン テーブルの CSS セレクターの最後の行

Question

テーブル内にテーブルがあり、テーブル 2 ではなく、テーブル 1 の最後の行の背景のみを塗りつぶしたい.

<style> 
#test tr:last-child
{
  background:#ff0000;
}
</style>

<table border="1" width="100%" id="test">
<tr>
 <td>
  <table border="1" width="100%">
   <tr>
    <td>table 2</td>
   </tr>
  </table>
 </td>
</tr> 

<tr><td>table 1</td></tr>
<tr><td>table 1</td></tr>
<tr><td>table 1</td></tr>

</table>

CSS を使用して、table1 と table2 の最後の行の両方に色を付けています。