使用 :not() 在菜單上應用/取消應用邊框

先給每一個菜單項添加邊框

CSS Code復制內容到剪貼板

/* add border */  
.nav li {   
  border-right: 1px solid #666;   
}  

……然后再除去最后一個元素……

CSS Code復制內容到剪貼板

//* remove border */  
  
.nav li:last-child {   
  border-right: none;   
}  

……可以直接使用 :not() 偽類來應用元素：

CSS Code復制內容到剪貼板

.nav li:not(:last-child) {   
  border-right: 1px solid #666;   
}  

這樣代碼就干凈，易讀，易于理解了。

當然，如果你的新元素有兄弟元素的話，也可以使用通用的兄弟選擇符（~）：

CSS Code復制內容到剪貼板

..nav li:first-child ~ li {   
  
  border-left: 1px solid #666;   
}  

給 body添加行高

你不需要分別添加 line-height 到每個 <p>，<h*>等。只要添加到 body 即可：

CSS Code復制內容到剪貼板

body {   
  line-height: 1;   
}  

這樣文本元素就可以很容易地從 body 繼承。

所有一切都垂直居中

要將所有元素垂直居中，太簡單了：

CSS Code復制內容到剪貼板

html, body {   
  height: 100%;   
  margin: 0;   
}   
  
body {   
  -webkit-align-items: center;     
  -ms-flex-align: center;     
  align-items: center;   
  display: -webkit-flex;   
  display: flex;   
}  

看，是不是很簡單。

注：在IE11中要小心flexbox。

逗號分隔的列表

讓HTML列表項看上去像一個真正的，用逗號分隔的列表：

CSS Code復制內容到剪貼板

ul > li:not(:last-child)::after {   
  content: ",";   
}  

對最后一個列表項使用 :not() 偽類。

使用負的 nth-child 選擇項目

在CSS中使用負的 nth-child 選擇項目1到項目n。

CSS Code復制內容到剪貼板

li {   
  display: none;   
}   
  
/* select items 1 through 3 and display them */