css总结

 css中的','、'>'、'+'、'~'
,(群组选择器)
A , B{
    
}
复制代码
空格(后代选择器)
//选择A所有的后代B元素
A B{
    
}
复制代码
>（子元素选择器）
//选择A的一代B元素
A > B{
    
}
复制代码
总结：“>”是css3中特有的选择器，A B选择所有后代元素，为A>B只选择一代。

+(相邻兄弟选择器)
//设置的是紧跟在A元素后的B元素，指定元素的下一个元素
A + B{
    
}

//eg:设置列表中的第二个及后面的li，但第一个列表项不受影响、相同父元素、紧跟在其后
li + li{
    
}

复制代码
~（兄弟选择器）
//A之后的所有B元素，不一定要紧跟在A后面、相同父元素
A ~ B{
    
}

实现帮助信息框

<template>
  <div class="help-box">
    <div>
      <i class="camera"/>
      照相机
    </div>
    <div>
      <i class="calc"/>
      计算器
    </div>
    <div>
      <i class="movie"/>
      电影
    </div>
  </div>

</template>

<script>
export default {
  components: { },
  props: {},
  data() {
    return {
    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang="stylus">
.help-box
  border 1px blue solid
  position absolute
  left 30px
  bottom 100px
  width 200px
  font-size 18px
  >div
    position relative
    line-height 60px
    padding-left 100px
    >i
      position absolute
      left 20px
      top 0
      width 48px
      height 100%
      background-repeat no-repeat
      background-position 50% 50%
    >.camera
      background-image url('~assets/screen/camera.png')
    >.calc
      background-image url('~assets/screen/calc.png')
    >.movie
      background-image url('~assets/screen/movie.png')

</style>