首页 > 代码库 > CSS3技巧巧妙使用:not(:last-of-type)简化你的css代码
CSS3技巧巧妙使用:not(:last-of-type)简化你的css代码
终于找到了一个好方法，使用:not(:last-of-type)简单方便，再也不要麻烦的单独使用:last-of-type了，不错！
应用场景：平时我们的列表一般都会有分割线，但是最后一个列表没有分割线等。
<ul class="posts"> <li>123123</li> <li>123123</li> <li>123123</li> <li>123123</li> <li>123123</li></ul>
.posts { list-style: none; width:400px; margin: 0; padding: 20px; margin: 4rem auto; background: #f8f8f8;}.posts li{ border-bottom: 1px solid #000; margin-bottom: .5rem; padding-bottom: .5rem;}.posts li:last-of-type{ border-bottom: 0; margin-bottom: 0; padding-bottom: 0;}
运行结果：
我们再看一下使用:not(:last-of-type)来简化：
.posts { list-style: none; width:400px; margin: 0; padding: 20px; margin: 4rem auto; background: #f00;}.posts li:not(:last-of-type){ border-bottom: 1px solid #000; margin-bottom: .5rem; padding-bottom: .5rem;}
运行结果：
结果是一样的结果，但是我们的代码就简化了5行，试想在我们编写的其它代码中都使用这种技巧，不知道要省掉多少工夫。
同理，我们还能使用:not(first-of-type)来进行合理的使用！
CSS3技巧巧妙使用:not(:last-of-type)简化你的css代码
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。