Html div的：第n个孩子（2）的背景色也在改变身体的背景色_Html_Css_Css Selectors

Html div的：第n个孩子（2）的背景色也在改变身体的背景色

html css

Html div的：第n个孩子（2）的背景色也在改变身体的背景色,html,css,css-selectors,Html,Css,Css Selectors,为什么：nth-child2也会改变颜色？当设置为1或3时，不会发生这种情况守则：身体{ 字体大小：50px；文本对齐：居中； } div{ 宽度：30px；高度：30px；背景色：红色； } ：n-child1{ 背景颜色：蓝色； } ：n-child2{ 背景颜色：绿色； } ：n-child3{ 背景颜色：黄色； } 因为body是html页面的第二个元素结构是这样的 <html> <head> </head> <bo

为什么：nth-child2也会改变颜色？当设置为1或3时，不会发生这种情况

守则：

身体{ 字体大小：50px；文本对齐：居中； } div{ 宽度：30px；高度：30px；背景色：红色； } ：n-child1{ 背景颜色：蓝色； } ：n-child2{ 背景颜色：绿色； } ：n-child3{ 背景颜色：黄色； } 因为body是html页面的第二个元素

结构是这样的

<html>
  <head>

  </head>
  <body>

  </body>
</html>

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

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

选择器：nth-child2选择作为其父元素第二个子元素的每个元素

：nth-child3，nth-child1选择器不会影响body的背景色，因为body不是其父对象的第三或第一个子对象

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

body:nth-child2-选择body下任何级别上作为其各自父级的第二个子级的所有元素。因此，这将不会选择body标记。 body>：nth-child2-选择作为其各自父元素的第二个子元素的所有元素，并且父元素本身是body标记的直接子元素。

如果您希望仅在第二个子元素属于某种类型时才选择它，那么还应该在选择器中的伪类之前指定元素类型。例如，div:nth-child2将仅选择作为其各自父级的第二个子级的div标记。

您必须正确定位元素，如：

分区：N-child2{ 背景颜色：绿色；

} 使用typen的第n个div:n而不是第n个子项。这样可以确保只针对div。

这是因为您没有为特定元素指定第n个子元素，而是应用于任何元素选择器。这就是为什么：nth-child2也使用body元素，因为它是根元素html中的第二个元素

您可以覆盖应用于：nth-child2:

但是我建议您对特定元素使用：nth child，这比上面的方法要好，因为在上面的方法中：root body比前面的方法具有更大的特殊性，并且对于简单的元素css规则重写会带来一些问题

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

您的选择器：nth childx可以理解为*：nth childx表示每个x子元素

您可以将其设置为body:nth childx，以将其范围限制为body的任何直接x子级或者作为div:nth childx将其作用域限制为作为其父级的x子级的任何div

身体{ 字体大小：50px；文本对齐：居中； } div{ 宽度：30px；高度：30px；背景色：红色； } 分区：第n-child1{ 背景颜色：蓝色； } 分区：N-child2{ 背景颜色：绿色； } 分区：第n-child3{ 背景颜色：黄色； } 这是因为：nth-child2查找第一个直接父级的第二个子级，即html元素。。。因此，头是第一个孩子，身体是第二个。。。

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