html - 为什么第 n 个子选择器不会被另一个选择器覆盖？

Question

我已经设置了以下示例：http: //jsfiddle.net/SXEty/

<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的第二行（颜色：蓝色）不会覆盖上一行（颜色：红色）吗？还是 nth-child 属性具有优先权？如果它确实有优先权，那么所有浏览器都这样吗？