：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; }

我认为无论最后出现什么都是优先考虑的，所以在我看来，表格中的所有单元格都是绿色的。

然而，根据第n个类型选择器，偶数单元格仍为蓝色。即使我将它放在顶部并移除绿色td线，蓝色仍显示在中间，只有奇数单元格显示为红色。

有人可以解释为什么nth-of-type似乎先于其他一切？

以下是示例：

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

那是什么？

这里发生的是 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信息不同，我已经更正了该类型，类和属性选择器实际上具有相同的特异性。

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

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