标签：没有 技术分享 分割 class round type style 9.png 使用
终于找到了一个好方法，使用: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代码
标签：没有 技术分享 分割 class round type style 9.png 使用
原文地址：http://www.cnblogs.com/studycc/p/6601249.html
