保证不会被搜索引擎认为是垃圾信息而被忽略；使屏幕阅读器不会忽略被隐藏的文字。

.text-hidden {display:block; overflow: hidden;width: 0;height: 0;
}复制代码

div{box-sizing: border-box;
}复制代码

div{display: -webkit-box;overflow: hidden;text-overflow: ellipsis;
}复制代码

只能用于单行且必须设置宽高

为父元素添上clearfix，简单好用

.clearfix:after {display: table;content: '';clear: both;overflow: hidden;
}
.clearfix {  *zoom: 1;
}复制代码

img {filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
}复制代码

body:before {content: "";  position: fixed;top: -10px;left: 0;width: 100%;height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);-moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);box-shadow: 0px 0px 10px rgba(0,0,0,.8);  z-index: 100;
}复制代码

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

html { -moz-osx-font-smoothing: grayscale;  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}复制代码

a[href^="http"]:empty::before {content: attr(href);
}复制代码

.complexBlock {width: calc(100% - 50% / 3);padding: 5px calc(3% - 2px);margin-left: calc(10% + 10px);
}复制代码

.noclick { pointer-events: none; }复制代码

p{  text-align: center;
}p:after,
p:before{  content: "";  position: absolute;  top:10px;  height: 1px; background: red; width: 200px
}p:after{  left: 0;
}p:before{  right:0;
}复制代码

<div class="choose"><label><input type="checkbox">111</label><label><input type="checkbox">222</label><label><input type="checkbox">333</label><label><input type="checkbox">444</label><label><input type="checkbox">555</label>
</div>
<p class="count"></p>复制代码

.choose{counter-reset: fruit;
}.choose input:checked{counter-increment: fruit;
}.count:before{content: counter(fruit);
}复制代码

div {user-select: none;
}复制代码

* {-webkit-tap-highlight-color: rgba(0,0,0,0);
}复制代码

.block {transform: translateZ(0);
}复制代码

button{width: 200px;height: 50px;border-radius: 4px;background: #ea6f5a;border: none;color: #fff;position: relative;
}button:after{background: #fff;content:"";position: absolute;width: 50px;height: 155px; left: -70px;top: -60px;opacity: .3;transform: rotate(40deg);transition: all 1.4s cubic-bezier(0.2, 1, 0.2, 1);
}button:hover:after{left: 60%;
}复制代码

.arrow {  width:0px;  height:0px;  border-left:10px solid transparent;   border-right:10px solid transparent;   border-bottom:10px solid red; font-size:0px;  line-height:0px;
}复制代码

.popup{  position: fixed;  margin: auto;  top:0; left: 0; right: 0;bottom:0;z-index:1;
}复制代码