为什么我的第二个：nth-​​child选择器优先考虑？

Question

我在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部分已切换。

Answer 1

你必须记住CSS样式总是级联（除非标记！重要）。

所以，你有每个第三个孩子和每个第二个孩子，但当这些孩子等同一个孩子（6,12）时，最后的风格将永远是应用的风格。

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

更多阅读：http://www.htmlhelp.com/reference/css/structure.html#cascade

Answer 2

这是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可以＆＃34;打破＆＃34;这些规则。因此，出于维护原因，请尝试省略它。

Answer 3

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

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

Answer 4

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