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

DEMO ：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>关闭第二组<div>。从本质上讲，您过早地关闭了.parent2 div，以便让最后一个孩子工作。

另请注意，JSFiddle.net有一个很好的'Tidy Up'功能，可以说明这一点。

最后一个孩子与文章不合作

2 个答案: