:nth-of-type 选择器覆盖所有其他 CSS 选择器

Question

我正在尝试修改我的 HTML、JavaScript 和 CSS3 考试；我对 CSS 选择器和优先级有点困惑。

我有以下 CSS：

table                   { border: 1px solid black; }
tr:nth-child(odd)       { background-color: red; }
tr td:nth-of-type(even) { background-color: blue; }
td                      { background-color: green; }

我认为最后的优先级，所以我认为表格中的所有单元格都是绿色的。

但是，根据 nth-of-type 选择器，偶数单元格仍然是蓝色的。即使我把它放在顶部并删除绿色的 td 线，蓝色仍然显示在中间，只有奇数单元格显示为红色。

有人能解释一下为什么第 n 个类型似乎优先于其他一切吗？

示例如下：

table { border: 1px solid black; }
tr:nth-child(odd) { background-color: red; }
tr td:nth-of-type(even) { background-color: blue; }
td { background-color: green; }

<table style="width: 100%;">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

https://jsfiddle.net/e6157xwz/

Answer 1

蓝色的规则更具体，这就是它优先的原因。

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

这与顺序无关，而与准确性有关。 第一个选择器是一个类型的选择器，第二个选择器是一个类型的选择器，然后指定一个过滤器，而第三个选择器指定两个类型和一个过滤器。

选择器越准确，优先级越高。仅当两个（或更多）选择器准确无误时，声明顺序才有意义。

Answer 3

这是因为您的选择器有specificity。有两个规则匹配td 元素。他们的calculated specificity 是：

tr td:nth-of-type(even) -> 0,0,1,2
td                      -> 0,0,0,1

无论源顺序如何，具有更高特异性的规则都会获胜。

Answer 4

那么这是什么？

这里发生了什么是 selector specificity。

以下选择器类型列表是增加特异性：

1. 通用选择器（例如*）
2. 类型选择器（例如h1）
   类选择器（例如 .example）
   属性选择器（例如[type="radio"]）
3. 伪类（例如，:hover）
4. ID 选择器（例如#example）
5. 内联样式（例如style="font-weight:bold"）

代码的简化说明

在您的示例中，伪选择器 :nth-of-type(even/odd) 是类别 3，它具有优先权，因为并发选择器只有 type selectors（类别 2.1）。

重要提示

与该链接后面提供的 MDN 信息不同，我已更正了类型、类和属性选择器实际上具有相同的特异性。