本文为部分翻译文章，主要内容来自于：css-protips，笔者自身也添加了一些自己的小的Tips。
使用:not()属性为导航添加或者去除边框
传统的方法是首先为每个li标签添加标签：
/* add border */
.nav li {
border-right: 1px solid #666;
}然后用last-child伪属性作用于最后一个元素上：
/* remove border */
.nav li:last-child {
border-right: none;
}代替的方法应该是使用not伪类去设置仅作用于部分元素的属性：
.nav li:not(:last-child) {
border-right: 1px solid #666;
}为body添加line-height属性
往往需要为p、h*这类标签单独的添加行高属性等，作为替代的是可以将它添加到body属性中，即：
body {
line-height: 1;
}通过这种方式文本类的元素可以自动继承该属性。
设置自动居中
任何一个元素的自动居中可以使用flex属性：
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}使用逗号分割列表
ul > li:not(:last-child)::after {
content: ",";
}使用负的nth-child属性选择元素
li {
display: none;
}
/* select items 1 through 3 and display them */
li:nth-child(-n+3) {
display: block;
}使用SVG作为Icon
.logo {
background: url("logo.svg");
}使用SVG作为图标可以达到自动缩放的效果。
文本显示的优化
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}使用max-height在单纯的CSS滑块上
.slider ul {
max-height: 0;
overlow: hidden;
}
.slider:hover ul {
max-height: 1000px;
transition: .3s ease; /* animate to max-height */
}继承box-sizing属性
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}设置Table元素等宽
.calendar {
table-layout: fixed;
}使用Flexbox作为Margin Hacks
.list {
display: flex;
justify-content: space-between;
}
.list .person {
flex-basis: 23%;
}为空的Links添加默认内容
a[href^="http"]:empty::before {
content: attr(href);
}防止iOS设备上的元素不可点击
在iOS设备中，有时候Click事件会失效，需要设置一个专门的cursor属性：
cursor:pointer不过需要注意的是，这个属性不可设置在Android设备上，如果设置在Android设备上，点击的时候会出现一片蓝色的背景。
防止iOS设备上输入失焦
在iOS设备中，有时候如果弹出了键盘会导致输入框失焦，即键盘上的内容无法显示在输入框内，需要进行以下覆盖：
* {
-webkit-user-select: none; /* prevent copy paste */
}变为
input[type="text"] {
-webkit-user-select: text;
}