最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
:first-child和:last-child学习笔记
时间：2022-06-25 09:00:21 编辑：袖梨 来源：一聚教程网
刚在折腾主题的时候发现的一个小问题，我很好奇。
首先介绍下:first-child伪类，即选择第一个对象。
例如：
测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试
在css中可以使用.loop:first-child给第一个层单独定义样式。同理，可以使用.loop:last-child给最后一个层单独定义。
出现问题
如果在下面加上一行：
测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试
我是没有样式来捣乱的
那么.loop:last-child就会失效，不会作用于任何div。同理，如果在前面加上一个div，那么.loop:first-child也会失效。
解决办法
使用一个div将所有.loop包裹，即：
测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试
我是没有样式来捣乱的
那么.loop:last-child就有效了，同理.loop:first-child。
补充
根据结构不同，在部分情况下可能只会出现:last-child失效。总之只要两个中一个出了问题，就极可能是使用此样式的层没有被整个包裹起来。
相关文章
- jm天堂网页版官方登录入口-jm天堂网页版直接登录入口 12-14
- 蝉妈妈网页版直达入口-蝉妈妈app官方正版入口在哪 12-14
- 豆包AI智能在线网页解析神器-豆包AI智能在线会议纪要生成助手 12-14
- 小红书Web官网登录入口-小红书官方网页版一键登录 12-14
- 苍云阅读app如何快速找到目录-目录入口位置 12-14
- 苹果ID登录官网入口 - 苹果Apple ID账户登录页面一键直达 12-14