使用 first-child 与 last-child 获取不到元素

Question

前些天有人在群里问 CSS3 选择器的问题，本地测试的时候可以给指定元素应用样式，但是上传到服务器上面就失效了，根据我的观察，这跟服务端肯定没有关系，问题还是出在选择器上面。

下面我们通过实际的代码例子来介绍一下如何解决这个问题，假如我们有以下的 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>

我们需要找出最后一个有类 button 的 a 标签，那么根据我们所了解的 CSS3 伪类，可以轻松的编写出下面的代码

.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>
<style>
div .button:last-child {
    background-color: #ffd700;
}
</style>

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

总结

那么他们究竟哪些话听哪些话不听了，经过我一番测试得出的结论是

• 当使用 first 的话，第一个子元素一定要是一样的标签。中间和最后可以不一样，
• last 则反之，最后一个元素要一样，前面和中间可以不一样