为什么我的第二个 :nth-child 选择器优先？答案

【问题标题】：Why is my second :nth-child selector taking priority?为什么我的第二个 :nth-child 选择器优先？
【发布时间】：2016-06-25 09:14:05
【问题描述】：

我对 css 中的 :nth-child() 有疑问。

当我有这样的 HTML 结构时：

<div class="parent">
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
  <div class="child">child</div>
</div>

我的 CSS 看起来像这样：

div.parent div.child:nth-child(3n) {
  background-color: yellow;
}

div.parent div.child:nth-child(2n) {
  background-color: white;
}

似乎第二条（最后一条）指令正在获胜。像这样的每个环境都是这样吗？

这是一个JSFiddle，其中包含了两次切换 CSS 部分的示例。

【问题讨论】：

是的，后面的选择器总是优先于前面的选择器，除非前面的选择器是 more specific 或者该选择中的样式被赋予了 !important 规则。
不完全是重复的，但请阅读这个问题：stackoverflow.com/questions/1043001/…

标签： html css css-selectors

【解决方案1】：

是的，最后一条规则将在相同属性上超越另一条规则。这适用于一般的 css，而不是特定于这种情况。

【讨论】：

好的，谢谢。只是想知道 :nth-child(2) 是否具有与 :nth-child(3) 相同的功能。

【解决方案2】：

您必须记住 CSS 样式总是会级联（除非标记为 !important）。

因此，您有每 3 个孩子和每 2 个孩子，但是当它们等于同一个孩子 (6, 12) 等等时，LAST 样式将始终是应用的样式。

您可以在任何浏览器上看到此结果。

【讨论】：

特异性也起作用。具有相同的特异性（正如他们目前所拥有的那样），您所说的是正确的，但如果第一个选择器具有更大的特异性，那么您所说的将不适用。 !important 不是唯一的极端情况。
谢谢@JamesDonnelly。这是我的疏忽。

【解决方案3】：

这是导致selector's specificity

你可以在这里找到定义：https://www.w3.org/TR/CSS2/cascade.html

还有一个例子：

*             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

在您的情况下，特异性是相同的。所以规则是，如果之前有具有相同属性的样式（在您的情况下为background-color），则必须应用最后一个样式。

只有属性后面的!important 才能“破坏”这些规则。因此，出于维护原因，请尽量省略它。

【讨论】：

你使用了正确的逻辑，但你一开始就得出了错误的结论。这是 not 因为选择器在问题中的特殊性。这是因为级联。

【解决方案4】：

除了:matches() 和:not() 之外，每个伪类在特异性方面都与类选择器或属性选择器完全相同。例如，特异性不区分两个 :nth-child() 伪类，它们具有不同的参数，碰巧匹配相同的元素。同样的原则也适用于属性选择器——属性选择器始终具有与类选择器或伪类相同的特性，even if the attribute name is "id"。

因此，通常的级联规则适用：在具有与元素匹配的相同特定选择器的两条规则之间，后一条规则获胜（尽管有!important）。

【讨论】：