上一篇文章给大家分享了多元素选择器，这篇给大家分享后代选择器。
后代选择器
后代选择器，是指选择某个元素包裹的所有元素，需要运用到空格来选择。下面通过具体的代码来看一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
border: 1px solid red;
}
/*选中.box 下面的所有后代为p元素的元素 特点：可以影响.box 后面很多层*/
.box p{
color: red;
}
.box span{
color: green;
}
</style>
</head>
<body>
<div class="box">
<p>p1</p>
<h1>h1</h1>
<div>
<span>span</span>
<p>p2</p>
<div>
<p>p3</p>
</div>
</div>
</div>
</body>
</html>
上面代码中.box p{} 和.box span{}来选中div元素包裹的p、span元素。希望这篇文章对学习前端你的小伙伴有所帮助。
