菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type)

江山如画 • 2018年9月27日上午10:10 • 网页制作 • 阅读 4250

网页开发时，导航菜单的最后一项或新闻列表的最后一项需要和前面其他项显示不同，如导航的最后一个菜单不再需要分隔符或右边的空白间距，新闻或文章列表的最后一项不需要底边距，列表一般都会有分割线，但是最后一个列表没有分割线等。

如文章列表如下：

<ul class='posts'>
  <li class='post'>
    <h3>中国网页设计-权威网页制作教程网站</h3>
  </li>
  <li class='post'>
    <h3>好站推荐-www.125jz.com</h3>
  </li>
  <li class='post'>
    <h3>HTML5学习专题上线了！</h3>
  </li>
</ul>

原来的实现方法如下:

.posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post {
  border-bottom: 1px solid #eee;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  &:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

为了让最后一项的样式不同，还专门定义 :last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }，这样其实很繁琐，:not(:last-of-type)可以大大简化你的CSS代码。

.post:not(:last-of-type) {
  border-bottom: 1px solid #eee;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
}

使用not(:last-of-type)，省掉了5行代码。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2699.html

菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type)

99%的人还看了以下文章

第3课：颜色与背景

CSS制作上一页 下一页 页码显示样式

12款纯CSS3实现的优秀导航菜单（含源码下载）

HTML5网页中如何嵌入音频，视频？

网页中的框架（详解）

跟永哥学HTML5（1）：认识html5

发表回复

CSS制作上一页下一页页码显示样式