<分区>
<分区>
我刚开始学习 CSS 中的伪类，我很困惑为什么 nth-of-type 和 nth-child 在我的代码中表现异常。
在这段代码中，我假设选择器:
:nth-of-type(3) {
border: 2px solid red;
}
只会选择 2 个元素: id为“12”的分区 ID为“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>最佳答案
我能够稍微回答我的第二个问题。
Second question:
For the selector:
:nth-child(3)Why is this coloring the div with id="2" yellow? And why does it color the background for the whole page yellow when I do:nth-child(2)or: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-of-type 和 nth-child 的行为并不像我预期的那样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57173269/