使用 first-child 与 last-child 获取不到元素 - 文章教程

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

发布于 2019-06-16 字数 1487 浏览 1216 评论 0

前些天有人在群里问 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 则反之,最后一个元素要一样,前面和中间可以不一样

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论