<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>CSS3选择器——2、层次选择器</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
width: 300px;
margin: 0 auto;
}
div{
margin: 5px;
padding: 5px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div>1</div>
<div class="active">2</div>
<div>3</div>
<div>4
<div>5</div>
<div>6</div>
</div>
<div>7
<div>8
<div>9
<div>10</div>
</div>
</div>
</div>
</body>
</html>
关于层次选择器，为了方便我们的陈述，创建了上面的文档，运行结果如下：
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;
}
运行结果如下：
