css查漏补缺呀

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