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)来进行合理的使用！