一、初识层级选择器
层级选择器是CSS选择器中的一种，它可以帮助我们通过多个元素之间的关系，选择所需要的元素。好比我们在HTML中的标签嵌套，一个标签可以嵌套另一个标签，层级选择器就是利用这种父子、祖先后代等关系去选择元素的。
在CSS中，层级选择器的表示方法是将子选择器写在父选择器的后面，用空格隔开，例如：
div p {
color: red;
}
以上代码就是选择所有p标签，但要是它们是div标签的子元素。我们可以发现通过这种方式我们可以构建非常具有针对性的选择器。
二、子选择器和后代选择器
既然层级选择器是通过父子元素之间的关系来选取元素的，那它们之间的关系究竟是如何定义的。在CSS选择器中，我们常常可以用“>”符号表示子选择器，“空格”表示后代选择器。
子选择器选择的是所有直接属于父元素的子元素，而后代选择器选择的是父元素下的所有后代元素，不论直接与否。咱们看看下面的实例：
- 苹果
- 梨子
- 鸭梨
- 香梨
- 菠萝
原创文章，作者：GOCBV，如若转载，请注明出处：https://www.506064.com/n/369407.html
微信扫一扫 
支付宝扫一扫 