CSS3选择器——2、层次选择器

	
		
		
		
	
	
	
		
1
		
2
		
3
		
4
			 
5
			 
6
		
		
7
			 
8
			 	  
9
			 	  	   
10
			 	  
			 
		
		
	

关于层次选择器，为了方便我们的陈述，创建了上面的文档，运行结果如下：

1、后代选择器

修改文档中的CSS样式，在末尾添加如下内容：

div div{
	background-color: orange;
}

重新运行页面

但凡一个div的上层还是div元素的都被变成了橘红色

2、子选择器

在CSS样式中添加

body > div{
	background-color: green;
}

运行结果

我们看到只有与body元素有直接关系（父子关系）的元素才会被变成绿色，这也是子选择器与后代选择器的区别

3、相邻兄弟选择器

在css中兄弟关系是指两个同级别，拥有同一个父元素的两个或两个以上元素的关系，例如文档中的div1、2、3、4、7，而相邻关系是指div2在div1之后

如果我们仅仅想把div2相邻的div改变颜色，需要用到相邻兄弟选择器

.active + div{
	background-color: lime;
}

运行结果如下：

可以看出，颜色改变仅仅是在div2之后的div3，没有包含div2之前的div1

4、通用兄弟选择器

相邻兄弟选择器可以把元素之后的一个兄弟元素选择上，而通用兄弟选择器可以把元素之后的所有兄弟元素都选择上

.active ~ div{
	background-color: red;
}

运行结果如下：