jquery - CSS コードはある部分では機能するが、他の部分では機能しない

Question

2番目の列に色を付けたいと思います。私は.jsファイルにコードを持っています:

if($data == 0 ){
   $display.after("<tr id='after'><td></td><td>First Part</td></tr>");
   return; 
}

$display.after("<tr id='after'><td></td><td><table>..Second Part...</table></td></tr>"); 

.css ファイル内:

#after td td {
   background-color: red; 
}

2番目の部分は色が変わりますが、最初の部分は変わりません。

私が使用する場合：

#after td + td {
    background-color: red; 
}

または、最初の部分にテーブルを追加した場合。どちらも機能しますが、なぜですか？