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 中，我将每个第一个 child 设置为“红色”。但是我的下一行 CSS 将每个元素设置为“蓝色”。 CSS 的第二行(颜色:蓝色)不会覆盖上一行(颜色:红色)吗？还是第n个子属性优先？如果它确实有优先权，是否对所有浏览器都是如此？

Answer 1

因为 td:nth-child(1) 比 td 更具体。

我建议使用星球大战主题对 CSS 特性进行很好的概述

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html