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

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

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

如文章列表如下:

<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

(0)
江山如画的头像江山如画管理团队
上一篇 2018年9月27日 上午8:44
下一篇 2018年9月28日 下午2:48

99%的人还看了以下文章

  • vue学习-我的第一个vue代码

    创建一个 .html 文件,然后通过如下方式引入 Vue: <!– 开发环境版本,包含了有帮助的命令行警告 –> <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script> 或者: <!– 生产环境版本,优化了尺寸和速度 –>…

    2020年6月14日
    2.2K0
  • 跟永哥学HTML5(1):认识html5

    HTML5(简称H5),是超文本标记语言(HTML)的第五次重大修改,是最新一代的超文本标记语言,它不单单是一种标记语言,更为下一代 Web 提供了全新功能 。

    2018年1月21日
    1.9K0
  • js实现两个页面表单传值并接收

    网页制作时,需要两个页面之间传值,通过JS就可轻松实现。 js 实现两个页面表单传值并接收源码 A页面: <input type=”text” id=”txt”> <input type=”button” value=”测试” onclick=”test()”/> <SCRIPT LANGUAGE=”JavaScript”&gt…

    2019年7月10日
    2.9K0
  • 实现表格单线边框的两种方法

    实现表格单线边框方法一 border-collapse: collapse; 代码如下: See the Pen 实现表格单线边框的两种方法 by 江山如画 (@jgyzhr)on CodePen. 实现表格单线边框方法二 给table上边和左边设上边框线,给td下边和右边设上边框线 See the Pen 实现表格单线边框方法二 by 江山如画 (@jgy…

    2019年10月31日
    3.3K0
  • 第11课:表格的高级特性

    表格还有哪些相关属性? colspan和rowspan这两个属性用于创建特殊的表格。colspan是“column span(跨列)”的缩写。colspan属性用在<td>标签中,用来指定单元格横向跨越的列数: 例1: <table border=”1″> <tr><td colspan=”3″>单元格1&lt…

    2018年1月19日
    1.8K0
  • 第10课:表格

    表格用来显示那些逻辑上以行和列显示的信息。 表格难学吗? 对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。 例1: <table> <tr><td>单元格1</td><td>单元格2</td>&l…

    2018年1月19日
    2.6K0

发表回复

登录后才能评论