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个是很不听话的.

那么他们究竟哪些话听哪些话不听了,经过我一番询问,得出的结论是

当使用first的话,第一个子元素一定要是一样的标签.中间和最后可以不一样.

last则反之,最后一个元素要一样,前面和中间可以不一样