css上下层级选择框

CSS中的层级选择器是一种让你针对层叠样式表中的元素进行选择的方法。它允许你通过指定选择器的位置来直接选择当前元素所处的层级。

/* 父元素 */
#parent {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

/* 子元素1 */
#child1 {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #f00;
}

/* 子元素2 */
#child2 {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: #0f0;
} 

在上述代码中，我们通过在父元素上设置 position: relative;，并在子元素上设置 position: absolute;，使得子元素可以相对于父元素进行定位。然后我们通过指定不同的 top 和 left 属性，让子元素1和子元素2重叠在了一起。

现在我们需要通过层级选择器来分别对这两个子元素进行样式设置。下面是通过父元素和子元素的id来进行层级选择：

#parent #child1 {
  background-color: #f00;
}

#parent #child2 {
  background-color: #0f0;
} 

我们也可以使用 html > body 方式来选择层级，此方法选择了网页中 body 元素内的元素：

html > body #parent #child1 {
  background-color: #f00;
}

html > body #parent #child2 {
  background-color: #0f0;
} 

使用层级选择器可以精确控制元素的样式，但要注意不要嵌套层级过深，影响网页性能。