html - :nth-of-type selector overrides all other CSS selectors

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 线，蓝色仍然显示在中间，只有奇数单元格显示为红色。

有人可以解释为什么第 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

这是什么？

这里发生的事情是 selector specificity .

The following list of selector types is by increasing specificity:

1. Universal selectors (e.g. *)
2. Type selectors (e.g. h1)
   Class selectors (e.g. .example)
   Attribute selectors (e.g. [type="radio"])
3. Pseudo-classes (e.g., :hover)
4. ID selectors (e.g. #example)
5. Inline style (e.g. style="font-weight:bold")

代码的简化说明

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

重要提示

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