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