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

【问题标题】：Why doesn't the nth-child selector get overwritten by another?为什么第 n 个子选择器不会被另一个选择器覆盖？
【发布时间】：2025-12-19 16:35:06
【问题描述】：

我已经设置了以下示例：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 属性具有优先权？如果它确实有优先权，那么所有浏览器都这样吗？

【问题讨论】：

标签： html css

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

因为table td:nth-child(1) 是一个更具体的选择器，所以它会优先于table td，即使后者被稍后声明。

有趣的是，如果您使用 table td 定位父 ID，所有内容都会变为蓝色 - 即使稍后在 CSS 表中声明了 table td:nth-child(1)。

http://jsfiddle.net/mLrAf/2/

【讨论】：

这很有趣！谢谢:-)