first-child与last-child获取不到元素原因

html代码如下

<a href="#" class="button"><</a><a href="#" class="button">></a><div id="f">F</div><div id="s">S</div><div id="t">T</div>

css代码如下

.button:last-child {
    background-color: #ffd700;
}

运行后发现,第二个a的背景颜色并没有变色,真是奇了个怪了.

想了想,css代码肯定没错,一定是HTML哪里有问题,经过几次修改之后发现,HTML和CSS改成这样就可以了

<div><a href="#" class="button"><</a><a href="#" class="button">></a></div><div id="f">F</div><div id="s">S</div><div id="t">T</div>

div .button:last-child {
    background-color: #ffd700;
}

这时我才恍然大悟,first-child与last-child这2个果然很傲娇很任性,如果父亲元素里的子元素有包含其他不一样的标签时,他们2个是很不听话的.