1. 使用 :not() 为导航添加/取消边框
传统的方法为导航栏添加边框：
/* add border */
.nav li {
border-right: 1px solid #666;
}
/* remove border */
.nav li:last-child {
border-right: none;
}
用css的:not()实现：
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
减少了很多代码实现了相同的功能。
2. 垂直居中（任何元素）
html, body {
height: 100%;
margin: 0;
}
/*要设置垂直居中的元素*/
element {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
3. 使用负的 nth-child 选取元素
使用负的 nth-child 在 1 到 n 之间选择元素：
li {
display: none;
}
/* 使用负的 nth-child 在 1 到 n 之间的元素，选择第1到3个元素就是nth-child(-n+3) */
li:nth-child(-n+3) {
display: block;
}使用 :not()来做：
li:not(:nth-child(-n+3)) {
display: none;
}
4. 使用 Flexbox 来避免 Margin Hacks
在做多列布局的时候，可以通过 Flexbox 的 space-between 属性来避免nth-、first-、 last-child 等 hacks：
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}
这样，列之间的空白就会被均匀的填满。