CSS3技巧巧妙使用:not(:last-of-type)简化你的css代码

Posted 2020-09-06

终于找到了一个好方法，使用: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)来进行合理的使用！