div的：nth-child（2）background-color也正在改变主体background-color

Question

:nth-child(2)为什么也会更改<body>的颜色？ 设置为1或3时不会发生这种情况。

代码（ http://codepen.io/kreitzo/pen/mPXzWv ）：

 body { font-size: 50px; text-align: center; } div { width: 30px; height: 30px; background-color: red; } :nth-child(1) { background-color: blue; } :nth-child(2) { background-color: green; } :nth-child(3) { background-color: yellow; }

 <div></div> <div></div> <div></div> <div></div>

Answer 1

这是因为body标记是其父标记的第二个子标记（这是html根标记）。 您可以在下面的屏幕截图中看到它。 html标签的第一个孩子是head标签，第二个孩子是body标签。

选择器:nth-child(2)选择作为其父级第二个子级的每个元素。

:nth-child(3) ， nth-child(1)选择器不会影响body的背景颜色，因为body不是其父级的第三个或第一个子级。

如果您只想选择特定父级的第二个子级，则还应将父级作为选择器的一部分提及（如下所示）：

body :nth-child(2) -在body下的任何级别选择作为其各自父级的第二body :nth-child(2)所有元素。 因此，这将不会选择body标签。
body > :nth-child(2) -选择作为其各自父级的第二body > :nth-child(2)所有元素，并且父级本身是body标签的直接子级。

如果您只想选择第二个孩子的特定类型，则还应该在选择器中的伪类之前指定元素类型。 例如， div:nth-child(2)将仅选择div标签，这些标签是其各自父级的第二个子级。

Answer 2

因为body是您html页面的第二个元素

结构是这样的

<html>
  <head>

  </head>
  <body>

  </body>
</html>

因此，您当前的CSS将捕获所有第二个元素。 像这样为div的元素定义css

body {
  font-size: 50px;
  text-align: center;
}

div {
  width: 30px;
  height: 30px;
  background-color: red;
}

div:nth-child(1) {
  background-color: blue;
}

div:nth-child(2) {
  background-color: green;
}

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

Answer 3

您必须对元素进行适当的定位，例如：

 div:nth-child(2) { background-color: green; }

Answer 4

使用div：nth-of-type（n）代替nth-child。 这样，您可以确保仅将div作为目标。

Answer 5

这是因为您没有为特定元素指定nth-child，而是将其应用于任何元素选择器。 这就是为什么:nth-child(2)也是主体元素的原因，因为它是根元素html的第二个元素。

您可以覆盖应用于:nth-child(2)的正文的css规则：

/*just add :root  in your existing body to make it greater specificity*/
:root body{
  background-color: transparent;
}
:nth-child(2){
  background-color: green;/*this will not override to body bgcolor*/
}

但是我建议您对特定元素使用:nth-child ，它比上述方法更好，因为在上述方法中:root body比以前具有更大的特异性，并且会给简单元素css规则覆盖带来一些问题。

div:nth-child(2){
   background-color: green;
}

Answer 6

您的选择器:nth-child(x)可以读为*:nth-child(x)表示每个x子代。

您可以将其设置为body :nth-child(x)以将其范围限制为body任何直接x子对象，也可以将其设置为div:nth-child(x)以将其范围限制为作为其父级的x子对象的任何div

 body { font-size: 50px; text-align: center; } div { width: 30px; height: 30px; background-color: red; } div:nth-child(1) { background-color: blue; } div:nth-child(2) { background-color: green; } div:nth-child(3) { background-color: yellow; }

 <div></div> <div></div> <div></div> <div></div>

div的：nth-child（2）background-color也正在改变主体background-color

问题描述

6 个解决方案

解决方案1
3 已采纳 2016-04-12 09:34:47

解决方案2
1 2016-04-12 09:34:29

解决方案3
0 2016-04-12 09:36:14

解决方案4
0 2016-04-12 09:39:31

解决方案5
0 2016-04-12 09:49:32

解决方案6
0 2016-04-12 10:03:50

div的：nth-​​child（2）background-color也正在改变主体background-color

问题描述

6 个解决方案

解决方案1 3 已采纳 2016-04-12 09:34:47

解决方案2 1 2016-04-12 09:34:29

解决方案3 0 2016-04-12 09:36:14

解决方案4 0 2016-04-12 09:39:31

解决方案5 0 2016-04-12 09:49:32

解决方案6 0 2016-04-12 10:03:50

div的：nth-child（2）background-color也正在改变主体background-color

解决方案1
3 已采纳 2016-04-12 09:34:47

解决方案2
1 2016-04-12 09:34:29

解决方案3
0 2016-04-12 09:36:14

解决方案4
0 2016-04-12 09:39:31

解决方案5
0 2016-04-12 09:49:32

解决方案6
0 2016-04-12 10:03:50