什么是元素层次
在HTML中，所有的元素都是层层嵌套的，具有不同的层次关系。这个层次结构实际上是一棵DOM（Document Object Model）树，树的根节点是整个文档，每个节点都是一个HTML元素。CSS就是利用这个层次结构为元素进行样式设置的。
当一个元素的样式需要根据其父元素而改变时，就需要使用元素层次来实现。
子孙选择器
子孙选择器用于选择元素的子元素或孙子元素（即子元素的子元素）。它们由两个或多个选择器组成，中间以空格隔开。
例如，想要为所有p元素的子元素的文本颜色设置为红色，则可以使用以下CSS代码：
p * {
color: red;
}
在这里，通配符 * 用于选择所有元素，而 p * 则只选择p元素的子元素。
直接子元素选择器
有时候，我们只需要选择一个元素的直接子元素，而不是后代元素。这时候，我们可以使用直接子元素选择器 >。
例如，想要为div元素中直接包含的p元素设置背景色，则可以使用以下CSS代码：
div > p {
background-color: yellow;
}
在这里，> 被用于选择div元素中的所有直接子元素p，而不包括后代元素p。
相邻兄弟选择器
相邻兄弟选择器用于选择与前一个元素在同一个父元素中，并且紧跟在前一个元素后面的元素。
例如，想要为所有h1元素后面的第一个p元素设置字体颜色，则可以使用以下CSS代码：
h1 + p {
color: blue;
}
在这里，+ 被用于选择紧跟在h1元素后面、并且是h1元素的同级元素的第一个p元素。
层叠顺序
元素层次也可以用于控制元素的层叠顺序。层叠顺序指的是当多个元素重叠时，哪个元素显示在哪个元素的上面。
层叠顺序的顺序是由以下几个因素决定的：
元素的z-index值，值越高，排在越上面
元素的父元素的z-index值，同样越高，排在越上面
后面的元素排在前面的元素的上面
例如，下面的HTML代码中，元素B会显示在元素A的上面：
<div class="container">
<div class="A"></div>
<div class="B"></div>
</div>
如果想改变元素的层叠顺序，可以使用z-index属性。z-index属性接受一个整数值，值越大，则元素显示在越上面。
例如，想要将元素B显示在元素A的后面，则可以将元素B的z-index值设为-1：
.A {
z-index: 1;
}
.B {
z-index: -1;
}
定位和层次
定位也可以用于控制元素的层叠顺序。当一个元素被定位后，就可以使用z-index属性来控制它与其他元素之间的层叠顺序。
当一个元素被定位后，它的z-index默认值为auto。如果想要改变元素的层叠顺序，则可以将z-index属性设置为一个整数值。
例如，想要将定位元素A放在非定位元素B的上面，则可以将元素A的z-index值设为2，元素B的z-index值设为1：
<div class="container">
<div class="A" style="position: absolute; z-index: 2;"></div>
<div class="B"></div>
</div>
结论
CSS的元素层次提供了一种强大的控制元素样式的方式。使用子孙选择器、直接子元素选择器和相邻兄弟选择器可以选择特定的元素，使用z-index属性和定位可以控制元素的层叠顺序。