在body中使用?:last-child伪类没有效果

最新推荐文章于 2024-02-21 17:41:50 发布

IOTNB

最新推荐文章于 2024-02-21 17:41:50 发布

阅读量365

点赞数 2

分类专栏： css伪类

本文链接：https://blog.csdn.net/IOTNB/article/details/113048242

版权

css伪类专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文探讨了在HTML中使用`:last-child`伪类选择器时遇到的问题，即由于浏览器自动添加的标签导致选择器失效。文章提出了解决方案，建议使用`:last-of-type`伪类选择器来替代，以确保正确选择到body中的最后一个div元素。通过这个方法，可以避免因浏览器默认行为而引发的样式问题。

摘要由CSDN通过智能技术生成

#在body中使用?:last-child伪类没有效果

这是原文件代码
这是原代码 这是浏览器中的代码
这是效果图

引起div:last-child没有效果的原因是浏览器在原代码的后面自动加了一些标签，所以第二个div就不是body中的最后一个元素了。
解决方法使用div:last-of-type伪类选择器即可。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

IOTNB

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

遇见关于css中E:last-child的问题

qq_45770253的博客

04-07

430

遇见关于css中E:last-child的问题开始今天在写一个简单样式的时候，遇见了一个小问题，我在使用css中结构伪类选择器 E:last-child 的时候，同一段代码在三个浏览器上（Chrome、Edge、IE）运行出来却是不同的样式，具体代码段如下：（HTML部分） <body> <div></div> <div></div> </body> （CSS部分） <style> div {

伪类选择器（:link :visited :hover :avtive Xnth-child(n) X: first-child X: last-child X:nth-of-type(n)...）

qq_43812504的博客

12-07

343

1. :link :visited :hover :avtive a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标划过链接 */ a:active {color:#0000FF;} /* 已选中的链接 */ 顺序要求： - 在CSS定义中，a:hover要放在a:link和a:visited之后才有效； - a:active要放在a:hove

参与评论您还未登录，请先登录后发表或查看评论

body下last-child偶尔会失效的真实原因

hesterdev的专栏

01-05

1601

原因是所用的编译器会在body内的末尾部分加一些辅助调试等用额外元素，如

记录解决在uniapp中使用:last-child不生效的问题

最新发布

hua4st的博客

02-21

802

此时最后一个navigator并没有变成红色，而是所有的都变为了红色。在某学习视频中使用如下代码设置:last-child。在navigator外包裹一层view。

解决css :last-child不生效的问题

Dante_al的博客

11-09

907

像这样的双循环结构，如果只给class名为"line"的盒子设置:last-child,则会全部生效，无法实现给最后一个盒子单独设置样式,这时候要考虑双循环带来的影响。步骤：先选择父级，然后选择第一层循环下的子级最后一个单元，之后在设置最后一个要改变的样式。

CSS中的:first-child和:last-child作用不显示的问题（解决方法）

weixin_49122171的博客

10-03

2204

CSS中的:first-child和:last-child作用不显示的问题（解决方法）

一个div 引发的浏览器不兼容问题

程序员一代码搬运工

10-20

前些天做项目的时候遇到了一个奇葩同样一个页面在不同浏览器中展现效果不同 ie11 中可以显示， ie7，ie8 却不行。把css和js都去掉就可以单独去掉一个都不行。。到最后一步一步试，才发现原来是多了个div。有够坑的。。。总结要注意细节。。 ...

jQuery中:last-child选择器用法实例

10-24

在jQuery中，`:last-child`选择器是一种非常实用的定位元素的方法，它允许开发者精确地选取父元素下的最后一个子元素。这个选择器的功能和定义在于，它可以匹配那些在其父元素的所有子元素中处于最后一个位置的元素...

css选择器:nth-child()的用法

丹

10-10

4122

:nth-child() :nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。偶数标签:nth-child(2n) 奇数标签 :nth-child(2n-1) 选择从第6个开始的，直到最后:nth-child(n+6) 选择第1个到第6个 :nth-child(-n+6) 两者结合使用，可以限制选择某一个范围，选择第6个到第9个 :nth-child(n+6):nth-child(-n+9) :nth-last-child() 选择器 :nth-last-chil

jQuery+css last-child实现选择最后一个子元素操作示例

10-17

`:last-child`伪类在CSS中用于选取其父元素的所有子元素中的最后一个子元素。首先，让我们理解一下标题和描述中的关键概念： 1. **jQuery**：这是一个广泛使用的JavaScript库，简化了DOM操作、事件处理、动画以及...

CSS的选择器 :first-child和:last-child

Learning_xzj的博客

08-21

8220

转载！！！原文地址：https://blog.csdn.net/weixin_44710964/article/details/104502602?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0.control&spm=1001.2101.3001.4242 last-child选择器查了下W3C的文档发现我想的没那么简单。就拿:last-child举例，文档中对其的解释是：

css3结构伪类选择器first-child,last-child,nth-child(),nth-last-child()，only-child

SBTR123456的博客

12-20

628

1 element:first-child 选择属于其父元素的首个子元素的element元素注意：div:first-child 必须是其父元素下面的第一个子元素且必须是div元素才能匹配的到匹配结果： 2 同理：element:last-child 指定其父元素的最后一个子元素的element元素注意：div:last-child 代表其父元素的...

Html中div学习使用过程中踩过的坑（一）

Thunder Wang的博客

07-13

2413

标签是Html5中运用到的最重要的一个标签之一，本文是我对在div学习使用过程中踩过的坑进行的一个小总结系列(一)

关于Css的选择器 :first-child和:last-child所踩过的坑

weixin_44710964的博客

02-25

3689

做项目时用到了last-child选择器，结果没有出现预期的效果，查了下W3C的文档发现我想的没那么简单。就拿:last-child举例，文档中对其的解释是：指定属于其父元素的最后一个子元素的 p 元素的背景色什么意思呢？我详细说明一下：假如是 div:last-child 那么该选择器最终选择的元素是：对所有div标签的父元素的其最后一个子元素div 设置样式，也就是说，其父元素的最...

【CSS】结构伪类选择器

德仔

06-20

1630

结构伪类选择器上图中，我们很清楚的看到了那些属于同级，first-of-type 是要找到同级的第一个，所以 div1、div2、div5 是符合要求的，所以“456” “ 789”’ “唯一的”会发生样式变化。解析：如上代码中，我们给 p 标签和 div 标签都设置了 only-of-type，但是只有 p 标签的起作用了。为什么？因为上述代码中存在多个 div。所以这个选择选择器一定要注意唯一性。...

css选择器的优先级

qq_28851143的博客

01-14

315

CSS选择器有很多种，如常用的类选择器，ID选择器，行级样式，交际选择器，伪类选择器等等，除此之外，外有一个通配符*，通配符应用范围最广，所以它的优先级是最低的，优先级最高的是！important过来是行内样式，ID选择器，类选择器。熟悉选择器优先级对以后做样式尤为重要。

:last-child 不生效解决

小白目的博客

07-01

1848

:last-child 不生效解决

解决css样式中first-child和last-child不生效的问题

热门推荐

LYQ

11-29

1万+

前端项目需要使用v-for指令来渲染一个问题回复列表，列表的第一和最后需要显示不同的样式，便使用到了first-child和last-child这两个CSS属性，在编码后发现 last-child 和 first child 中的样式不生效，经过查找资料后解决了这个不生效问题的同时也加深了印象。首先我们得明白first-child和last-child是干什么用的： first-child选择器用于选取属于其父元素的首个子元素的指定选择器。 last-c...

帮我写一个网页，在body中间放一个class为abc的div，宽度为1000px，这个div内再放五个class为efg的div，这五个div要在同一行，不能用flex，要用float布局，这五个div每个的宽度只有20px，，这五个div中最后那个必须要用last-child来设置跟父级元素边界的距离，并且距离为5px，我现在重点是要保证last-child设置的值必须有效，其他都无所谓。

05-30

好的，以下是解决方案： ```html <!DOCTYPE html> <html> <head> <title>Example</title> <style> .abc { width: 1000px; border: 1px solid #ccc; overflow: hidden; } .efg { width: 20px; height: 20px; background-color: #ccc; float: left; margin-right: 0; } .efg:last-child { margin-right: 5px; } </style> </head> <body> <div class="abc"> <div class="efg"></div> <div class="efg"></div> <div class="efg"></div> <div class="efg"></div> <div class="efg"></div> </div> </body> </html> ``` 解释一下： - `width: 1000px`：设置父级元素的宽度为1000px。 - `overflow: hidden`：为了让浮动的子元素不超出父级元素。 - `float: left`：让子元素横向浮动。 - `margin-right: 0`：为了让每个子元素之间没有空隙。 - `.efg:last-child`：选择最后一个子元素，并设置其距离父级元素的右边框为5px。注意事项： - 由于使用了float布局，子元素会脱离文档流，所以需要在父级元素上添加`overflow: hidden`来清除浮动。 - 由于在选择器中使用了:last-child伪类，所以需要保证最后一个子元素是class为efg的div，否则:last-child选择器会失效。