html - last-child 无法正常使用文章

Question

为什么文章的行为与涉及最后一个孩子的 div 不同

HTML

<div class="parent">
<div class="example">111</div>
<div class="example">111</div>
<div class="example">111</div>
<div class="example">111</div>
</div>

<br>

<div class="parent2">
<article class="example">111</div>
<article class="example">111</div>
<article class="example">111</div>
<article class="example">111</div>
</div>

CSS

.parent .example{ background-color: red;}
.parent .example:last-child{background-color: yellow;}

.parent2 .example{ background-color: red;}
.parent2 .example:last-child{background-color: yellow;}

演示：http: //jsfiddle.net/chLLa/1/

Answer 1

您没有正确关闭标签

<div class="parent">
<div class="example">111</div>
<div class="example">111</div>
<div class="example">111</div>
<div class="example">111</div>
</div>

<br>

<div class="parent2">
<article class="example">111</article>
<article class="example">111</article>
<article class="example">111</article>
<article class="example">111</article>
</div>

Answer 2

你正在关闭你的第二组<article>'s <div>。从本质上讲，您太早地关闭了 .parent2 div，以至于正确的最后一个孩子无法工作。

另请注意，JSFiddle.net 有一个很好的“整理”功能可以说明这一点。