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

標籤：沒有   技術分享   分割   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代碼