html - n 番目の子セレクターが別のセレクターによって上書きされないのはなぜですか?

Question

<style>
table td, th { padding: 8px; text-align: left; }
table td:nth-child(1) { color: red; }
table td { color: blue }
</style>
...
<table>
    <tr><th>Name</th><th>Age</th><th>City</th></tr>
    <tr><td>Bob</td><td>27</td><td>Los Angeles</td></tr>
    <tr><td>Charlie</td><td>34</td><td>San Diego</td></tr>
    <tr><td>Daniel</td><td>41</td><td>San Francisco</td></tr>
</table>

最初の列が青ではなく赤になっている理由が気になります。

私の CSS では、すべての最初の子を「赤」に設定しました。しかし、CSS の次の行では、すべての要素を「青」に設定します。CSS の 2 行目 (色: 青) は前の行 (色: 赤) をオーバーライドしませんか? それとも、n番目の子プロパティが優先されるということですか? 優先順位がある場合、これはすべてのブラウザーに当てはまりますか?