This question already has answers here:
What does a space preceding :nth-child(n) do?
（3个答案）
6个月前关闭。
我刚刚开始学习CSS中的伪类，并且对为什么nth-type和nth-child在我的代码中表现异常感到困惑。
在这段代码中，我假设选择器：
只会选择2个元素：
div ID为“ 12”
编号为“ 113”的段落
但是，每个父项下类型的每三个元素都有一个红色边框。为什么会这样呢？如果我只有选择器，那不是唯一的情况吗？
对这个棘手的问题表示歉意，并感谢您抽出宝贵的时间对此进行澄清。
这是完整的代码：
解决问题。我不知道为什么。应该注意的是，我使用的是Codepen，但在堆栈交换的代码片段上仅使用：nth-of-type（1）似乎可以正常工作。
（3个答案）
6个月前关闭。
我刚刚开始学习CSS中的伪类，并且对为什么nth-type和nth-child在我的代码中表现异常感到困惑。
在这段代码中，我假设选择器：
:nth-of-type(3) {
border: 2px solid red;
}
只会选择2个元素：
div ID为“ 12”
编号为“ 113”的段落
但是，每个父项下类型的每三个元素都有一个红色边框。为什么会这样呢？如果我只有选择器，那不是唯一的情况吗？
body :nth-of-type(3)
对这个棘手的问题表示歉意，并感谢您抽出宝贵的时间对此进行澄清。
这是完整的代码：
.parent{
width: 400px;
text-align:center;
border: 1px solid black;
float: left;
margin: 20px;
}
.child{
width: 300px;
margin: 10px auto;
border: 1px solid black;
}
.grandchild{
width: 200px;
margin: inherit;
border: 1px solid black;
}
:nth-of-type(3) {
border: 2px solid red;
}
:nth-child(3) {
background-color: yellow;
}<body>
<div class="parent" id="1">
<div class="child" id="11">
<p class="grandchild" id="111">
1, 1, 1
</p>
<p class="grandchild" id="112">
1, 1, 2
</p>
<p class="grandchild" id="113">
1, 1, 3
</p>
<p class="grandchild" id="114">
1, 1, 4
</p>
</div>
<div class="child" id="12">
<p class="grandchild" id="121">
1, 2, 1
</p>
<p class="grandchild" id="122">
1, 2, 2
</p>
<p class="grandchild" id="123">
1, 2, 3
</p>
<p class="grandchild" id="124">
1, 2, 4
</p>
</div>
<div class="child" id="13">
<p class="grandchild" id="131">
1, 3, 1
</p>
<p class="grandchild" id="132">
1, 3, 2
</p>
<p class="grandchild" id="133">
1, 3, 3
</p>
<p class="grandchild" id="134">
1, 3, 4
</p>
</div>
<div class="child" id="14">
<p class="grandchild" id="141">
1, 4, 1
</p>
<p class="grandchild" id="142">
1, 4, 2
</p>
<p class="grandchild" id="143">
1, 4, 3
</p>
<p class="grandchild" id="144">
1, 4, 4
</p>
</div>
</div>
<div class="parent" id="2">
<div class="child" id="21">
<p class="grandchild" id="211">
2, 1, 1
</p>
<p class="grandchild" id="212">
2, 1, 2
</p>
<p class="grandchild" id="213">
2, 1, 3
</p>
<p class="grandchild" id="214">
2, 1, 4
</p>
</div>
<div class="child" id="22">
<p class="grandchild" id="221">
2, 2, 1
</p>
<p class="grandchild" id="222">
2, 2, 2
</p>
<p class="grandchild" id="223">
2, 2, 3
</p>
<p class="grandchild" id="224">
2, 2, 4
</p>
</div>
<div class="child" id="23">
<p class="grandchild" id="231">
2, 3, 1
</p>
<p class="grandchild" id="232">
2, 3, 2
</p>
<p class="grandchild" id="233">
2, 3, 3
</p>
<p class="grandchild" id="234">
2, 3, 4
</p>
</div>
<div class="child" id="24">
<p class="grandchild" id="241">
2, 4, 1
</p>
<p class="grandchild" id="242">
2, 4, 2
</p>
<p class="grandchild" id="243">
2, 4, 3
</p>
<p class="grandchild" id="244">
2, 4, 4
</p>
</div>
</div>
<div class="parent" id="3">
<div class="child" id="31">
<p class="grandchild" id="311">
3, 1, 1
</p>
<p class="grandchild" id="312">
3, 1, 2
</p>
<p class="grandchild" id="313">
3, 1, 3
</p>
<p class="grandchild" id="314">
3, 1, 4
</p>
</div>
<div class="child" id="32">
<p class="grandchild" id="321">
3, 2, 1
</p>
<p class="grandchild" id="322">
3, 2, 2
</p>
<p class="grandchild" id="323">
3, 2, 3
</p>
<p class="grandchild" id="324">
3, 2, 4
</p>
</div>
<div class="child" id="33">
<p class="grandchild" id="331">
3, 3, 1
</p>
<p class="grandchild" id="332">
3, 3, 2
</p>
<p class="grandchild" id="333">
3, 3, 3
</p>
<p class="grandchild" id="334">
3, 3, 4
</p>
</div>
<div class="child" id="34">
<p class="grandchild" id="341">
3, 4, 1
</p>
<p class="grandchild" id="342">
3, 4, 2
</p>
<p class="grandchild" id="343">
3, 4, 3
</p>
<p class="grandchild" id="344">
3, 4, 4
</p>
</div>
</div>
<div class="parent" id="4">
<div class="child" id="41">
<p class="grandchild" id="411">
4, 1, 1
</p>
<p class="grandchild" id="412">
4, 1, 2
</p>
<p class="grandchild" id="413">
4, 1, 3
</p>
<p class="grandchild" id="414">
4, 1, 4
</p>
</div>
<div class="child" id="42">
<p class="grandchild" id="421">
4, 2, 1
</p>
<p class="grandchild" id="422">
4, 2, 2
</p>
<p class="grandchild" id="423">
4, 2, 3
</p>
<p class="grandchild" id="424">
4, 2, 4
</p>
</div>
<div class="child" id="43">
<p class="grandchild" id="431">
4, 3, 1
</p>
<p class="grandchild" id="432">
4, 3, 2
</p>
<p class="grandchild" id="433">
4, 3, 3
</p>
<p class="grandchild" id="434">
4, 3, 4
</p>
</div>
<div class="child" id="44">
<p class="grandchild" id="441">
4, 4, 1
</p>
<p class="grandchild" id="442">
4, 4, 2
</p>
<p class="grandchild" id="443">
4, 4, 3
</p>
<p class="grandchild" id="444">
4, 4, 4
</p>
</div>
</div>
</body>最佳答案
我能够稍微回答第二个问题。
第二个问题：
对于选择器：:nth-child(3)为什么将id =“ 2”的div着色为黄色？以及为什么为整个页面上色
:nth-child(2)或:nth-child(1)时为黄色
我发现使用选择器
body :nth-of-type(1) {
border: 2px solid red;
}
body :nth-child(1) {
background-color: yellow;
}
解决问题。我不知道为什么。应该注意的是，我使用的是Codepen，但在堆栈交换的代码片段上仅使用：nth-of-type（1）似乎可以正常工作。
关于css - 在下面的代码中，伪类nth-type和nth-child的行为不符合我的预期。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57173269/
10-16 18:59