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

Posted 2023-03-06

【中文标题】:nth-of-type 选择器覆盖所有其他 CSS 选择器

【英文标题】：:nth-of-type selector overrides all other CSS selectors

【发布时间】：2015-08-31 10:55:58

【问题描述】：

我正在尝试修改我的 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/

【问题讨论】：

嗯，我想你有关于特异性是这里的问题的答案。这也是为什么您通常会看到经验丰富的 CSS 开发人员在更通用的规则之后将更具体的规则放在 CSS 的特定部分中的原因。它使您所写内容的预期行为更加清晰。

【参考方案1】：

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

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

【讨论】：

w3 规范在这里：http://www.w3.org/TR/selectors/#specificity

谢谢 :) 我现在就去看看

【参考方案2】：

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

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

【讨论】：

非常感谢，现在更有意义了。

通常这被称为特异性，而不是准确性。

【参考方案3】：

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

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

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

【参考方案4】：

那么这是什么？

这里发生了什么是 selector specificity。

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

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

代码的简化说明

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

重要提示

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

【讨论】：

那么在这个例子中我怎样才能得到红色的行，但只有偶数行的偶数列是蓝色的？

其实我想我已经解决了： tr:nth-of-type(even) td:nth-of-type(even) background-color: blue; ，对吗？

您的 CSS 至少令人困惑。请详细描述您想要达到的目标。

@user3284707 w3.org/TR/css3-selectors/#specificity 上的示例更详细地解释了这一点。

在 MDN 修复其特异性列表之前，请不要引用该文章。这意味着类、属性和伪类具有不同的特异性值，而它们没有。正如其他人提到的那样，规范要准确得多，它是权威资源，即使它不太容易获得。