: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

那这是什么？

这里发生的是选择器特异性.

以下选择器类型列表是通过增加特异性:

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