CSS伪类:last-child,实战使用

 时间:2024-11-09 09:53:26

1、先看下html代码,很简单,就是一个样式名为c的div,里面嵌套有几个样式名为i的div,代码如图。

CSS伪类:last-child,实战使用

2、样式代码也很简单,一些比较常见的样式。

CSS伪类:last-child,实战使用

3、看下现在的页面效果。

CSS伪类:last-child,实战使用

4、如果我们要为里面嵌套的div添加下边框:border-bottom: 1px solid #a9cdd7;页面效果怎样。

CSS伪类:last-child,实战使用

5、添加代码后,再看下页面效果,线条加上了,显示还不错,但有一个问题,最后一个元素的下边框线条和父容器的线条重叠了,导致这条线比其它的线条更粗。

CSS伪类:last-child,实战使用

6、为了解决上面的问题,我们就需要用到伪类了。添加last-child的伪类,代码如图。

CSS伪类:last-child,实战使用

7、再看下效果,现在显示更完美了。

CSS伪类:last-child,实战使用
  • 虚拟主机无法删除文件处理方法
  • 解决ps、Ai、Ae总是弹出要求输入序列号的方法
  • C# maskedTextBox控件属性详解
  • 怎么删除取消文件保护
  • 怎么从LOL客户端进入MSI助威宝典活动页面
  • 热门搜索
    tp路由器设置 家里有臭虫怎么办 工作压力大怎么安慰 路由器登录 青岛旅游景点地图 鼻子黑头怎么办 b股怎么买 羽绒服上的圆珠笔油怎么洗 在那遥远的地方是哪里的民歌 ai格式怎么打开