css层次选择器定义

层次选择器是CSS选择器中很重要的一个部分，它允许我们根据标签间的层次关系选择元素。

/*选取div下的所有p元素*/
div p {
  /*样式代码*/
}

上面代码中的空格表示父元素与子元素的关系，它可以匹配所有div下面的p元素，不管是直接还是间接子元素都可以。

/*选取div直接下的第一个p元素*/
div > p:first-child {
  /*样式代码*/
}

“>”符号表示直接父元素和直接子元素之间的关系，它只能选取div下的直接子元素p，且必须是第一个子元素才可以。这里我们用到了:first-child伪类选择器。

/*选取div中class为container的后代元素h1*/
div .container h1 {
  /*样式代码*/
}

“.”符号表示选取class为container的元素，空格表示它的后代元素，可以是h1或h1的子元素，只要是class为container的后代元素都可以。

/*选取div中id为wrapper元素后面的兄弟元素P*/
div #wrapper ~ p {
  /*样式代码*/
}

“~”符号表示元素的兄弟关系，选取id为wrapper元素之后的所有p元素兄弟。

总之，层次选择器的出现让我们可以更方便的从dom树中选取元素并应用样式，它极大的提高了CSS的灵活性和实用性。