Question

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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

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

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

body :nth-child(2) - 在body下的任何级别选择属于其各自父级的第二个子级的所有元素。因此，这不会选择body代码。
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。这样您就可以确保只定位 divs 。

Answer 5

因为您没有为特定元素指定nth-child但是已应用于任何元素选择器。这就是:nth-child(2)占用body元素的原因，因为它是根元素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)，以将其范围限制为x的任何直接body子项或者div:nth-child(x)将其范围限制为任何div，即其父级的x子级

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＆＃39; s：nth-child（2）background-color也改变了身体背景颜色

6 个答案:

div＆＃39; s：nth-​​child（2）background-color也改变了身体背景颜色

6 个答案:

div＆＃39; s：nth-child（2）background-color也改变了身体背景颜色