今天在写前端的时候遇到了一个问题
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则反之,最后一个元素要一样,前面和中间可以不一样