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>