12个CSS高级技巧汇总

1、使用 :not() 在菜单上应用/取消应用边框

先给每一个菜单项添加边框

CSS Code复制内容到剪贴板

/* add border */  
.nav li {   
border-right: 1px solid #666;   
}   
然后再除去最后一个元素……   
  
//* remove border */  
.nav li:last-child {   
border-right: none;   
}   
可以直接使用 :not() 伪类来应用元素：   
.nav li:not(:last-child) {   
border-right: 1px solid #666;   
}  

这样代码就干净，易读，易于理解了。
当然，如果你的新元素有兄弟元素的话，也可以使用通用的兄弟选择符（~）：

CSS Code复制内容到剪贴板

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

2、给 body添加行高

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

CSS Code复制内容到剪贴板

body {   
line-height: 1;   
}  

这样文本元素就可以很容易地从 body 继承。

3、所有一切都垂直居中

要将所有元素垂直居中，太简单了：

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。

4、逗号分隔的列表

让HTML列表项看上去像一个真正的，用逗号分隔的列表：

CSS Code复制内容到剪贴板

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

对最后一个列表项使用 :not() 伪类。

5、使用负的 nth-child 选择项目

在CSS中使用负的 nth-child 选择项目1到项目n。

CSS Code复制内容到剪贴板

li {   
display: none;   
}   
  
/* select items 1 through 3 and display them */  
li:nth-child(-n+3) {   
display: block;   
}  

就是这么容易。