CSS中几种常用的选择器

类a和b的背景颜色都为白色

大于号‘ > ’指子代元素(子代选择器)
.a>.b{
    background-color:#fff;
}

类a下的类b元素的背景颜色为白色

空格‘ ’指后代元素(后代选择器)
.a .b{
    background-color:#fff;
}

类a下的所有类b元素的背景颜色为白色(与子代选择器不同,后代选择器可以包含a下的所有b元素,包括子孙)

加号‘ + ’指相邻元素(相邻选择器)
.a+.b{
    background-color:#fff;
}

紧接在类a下的类b元素的背景颜色为白色(即选择紧接在.a元素后出现的.b元素,.a 和,b拥有共同的父元素)

波浪号‘ ~ ’指.a之后出现的所有.b
.a~.b{
  background:#fff;
}

.a之后的所有.b元素的背景颜色为白色(两种元素必须拥有相同的父元素,但是.b不必直接紧随.a)

相关推荐