欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jquery选择器:first-child与:last-child获取不到元素解决办法

程序员文章站 2022-04-29 16:02:49
...
下面我们通过实际的代码例子来介绍一下如何解决这个问题,假如我们有以下的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则反之,最后一个元素要一样,前面和中间可以不一样

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索css , 标签 代码 firstchild lastchild、jquery last child、jquery firstchild、jquery first child、jquery first last,以便于您获取更多的相关知识。

以上就是jquery选择器:first-child与:last-child获取不到元素解决办法的详细内容,更多请关注其它相关文章!