div的：nth-child（2）background-color也正在改变主体background-color
[英]div's :nth-child(2) background-color is also changing body background-color
问题描述
Why is the :nth-child(2) changing the color of the <body> too? 
:nth-child(2)为什么也会更改<body>的颜色？ When set to 1 or 3 this does not happen. 设置为1或3时不会发生这种情况。
The Code ( http://codepen.io/kreitzo/pen/mPXzWv ): 代码（ 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>
6 个解决方案
解决方案1
3 已采纳 2016-04-12 09:34:47
That is because the body tag is the second child of its parent (which is the root html tag). 这是因为body标记是其父标记的第二个子标记（这是html根标记）。 You can see this in the below screenshot. 您可以在下面的屏幕截图中看到它。 The first child of html tag is the head tag and the second child is the body tag. html标签的第一个孩子是head标签，第二个孩子是body标签。
The selector :nth-child(2) selects every element that is the second child of its own parent. 选择器:nth-child(2)选择作为其父级第二个子级的每个元素。
The :nth-child(3) , nth-child(1) selectors doesn't affect the background color of body because body is not the 3rd or 1st child of its parent. :nth-child(3) ， nth-child(1)选择器不会影响body的背景颜色，因为body不是其父级的第三个或第一个子级。
If you want to select only the second child of a specific parent then you should mention the parent also as part of the selector (like the below): 如果您只想选择特定父级的第二个子级，则还应将父级作为选择器的一部分提及（如下所示）：
-
body :nth-child(2)- Selects all elements that are 2nd children of their respective parent at any level underbody.body :nth-child(2)-在body下的任何级别选择作为其各自父级的第二body :nth-child(2)所有元素。 So, this will not select thebodytag.因此，这将不会选择body标签。 -
body > :nth-child(2)- Selects all elements that are 2nd children of their respective parent and the parent itself is a direct child of thebodytag.body > :nth-child(2)-选择作为其各自父级的第二body > :nth-child(2)所有元素，并且父级本身是body标签的直接子级。
If you wish to select the second child only if it is of a certain type, then the element type should also be specified before the pseudo-class in the selector. 如果您只想选择第二个孩子的特定类型，则还应该在选择器中的伪类之前指定元素类型。 For example, div:nth-child(2) will select only the div tags which are the second child of their respective parent. 例如， div:nth-child(2)将仅选择div标签，这些标签是其各自父级的第二个子级。
解决方案2
1 2016-04-12 09:34:29
Because body is the second element of you html page 因为body是您html页面的第二个元素
structure is like this 结构是这样的
<html>
<head>
</head>
<body>
</body>
</html>
So your current css will catch all the second elements. 因此，您当前的CSS将捕获所有第二个元素。 Define css for elements of div like this 像这样为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;
}
解决方案3
0 2016-04-12 09:36:14
You have to do proper targetting of element like : 您必须对元素进行适当的定位，例如：
div:nth-child(2) { background-color: green; }
解决方案4
0 2016-04-12 09:39:31
Use div:nth-of-type(n) instead of nth-child. 使用div：nth-of-type（n）代替nth-child。 This way you make sure only the divs are targeted. 这样，您可以确保仅将div作为目标。
解决方案5
0 2016-04-12 09:49:32
Its because you have not specified nth-child for specific element but applied for any element selector. 这是因为您没有为特定元素指定nth-child，而是将其应用于任何元素选择器。 That's why the :nth-child(2) takes to the body element also as it is the second element from the root element html . 这就是为什么:nth-child(2)也是主体元素的原因，因为它是根元素html的第二个元素。
You may override the css rules for the body applied to :nth-child(2) : 您可以覆盖应用于: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*/
}
But I would recommend you to use :nth-child for specific element which is better than the above way because in the above method :root body has greater specificity than previous and will make you some problem for simple element css rules overridings. 但是我建议您对特定元素使用:nth-child ，它比上述方法更好，因为在上述方法中:root body比以前具有更大的特异性，并且会给简单元素css规则覆盖带来一些问题。
div:nth-child(2){
background-color: green;
}
解决方案6
0 2016-04-12 10:03:50
your selectors :nth-child(x) could be read as *:nth-child(x) meaning every x child. 您的选择器:nth-child(x)可以读为*:nth-child(x)表示每个x子代。
you can set it as body :nth-child(x) to limit it's scope to any direct x child of body or as div:nth-child(x) to limit it's scope to any div that is the x child of it's parent 您可以将其设置为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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.