1、css中~和>
~为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景：
p~ul{
background:#ff0000;
}
<p>快乐生活</p>
<ul>
<li>生活</li>
<li>生活</li>
<li>生活</li>
</ul>
特点: 两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。
>指直接的子代元素：
.a，.b｛逗号指相同的css样式｝；.a .b｛空格指后代元素｝；.a>.b｛大于号指子代元素｝
2、>>>和／deep／
vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。
有些Sass之类的预处理器无法正确解析 >>>。可以使用/deep/操作符( >>>的别名)
如：
<style scoped lang="less">
/deep/ .weui-cell {
padding: 10px 5px;
}
/*去顶部边框*/
/deep/ .weui-cells:before {
border-top: 0;
}
</style>
https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles
3、input的placeholder右对齐或垂直方向对齐
input{
text-align: right;
vertical-align: middle; bottom // 垂直居中 靠底部
}
4、如何让css中的background-image图片自适应
默认情况下，background:url(图片路径)后只会显示图片中的一部分，从左上角算起。
加上以下代码，就实现了背景图片自适应效果了。如果只适应宽度，那去掉一个100%即可。
background-size:100% 100%; background-size:100% 100%;
5、伪类的使用
伪类可以帮我们快速实现好多效果，比如鼠标的hove事件，a标签的link效果，before、after等等，我们可以使用befor和after快速在元素上实现下划线或箭头的效果
image.png
出生体重后的单位，可以直接使用:after来实现，避免在写个span来实现
.weight:after {
content: "(g)";
color: #999999;
font-size: 13px;
}
image.png
6、div 标签内容超过宽度之后 自动换行
word-break: break-all;
word-wrap:break-word
