复合选择器.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复合选择器</title>
<!-- 选择器样式定义-->
<style type="text/css">
div{
width:200px;
height: 200px;
background-color:red;
}
/*后代选择器:祖先选择器与后代选择器通过[空格]隔开*/
div p{
background-color: orange;
}
div#div1{
width:200px;
height: 200px;
background-color:green;
}
/*并列选择器使用[,]隔开*/
div#div2,span{
background-color:blue;
}
</style>
</head>
<body>
<b> 后代选择器:</b>
<div>
<p>div下的p的颜色orange</p>
</div>
<br/>
<b> 并列选择器:</b>
<div id="div1">
<p>div下p的颜色</p>
</div>
<br/>
<div id="div2">
<span>并列选择器span的颜色</span>
</div>
</body>
</html>
展示效果: