复合选择器分为后代选择器，子代选择器，交集选择器和并集选择器
1.后代选择器
即跨过父类，而在该父类下的所有该后代选择器所对应的标签都会被应用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>div span{color: blue;}</style>
</head>
<body><span>这是span标签</span><div><span>这是span标签的子类</span><p><span>这是span标签的子子类，即第一个span标签的孙类</span></p></div>
</body>
</html>
由此可见，只要是在父类下的span标签都会有变化，即子类的子类也算
2.子代选择器
子代选择器是在后代选择器的基础上进一步差异化对标签的应用，可以对父类下的所有子类进行进一步的选择应用,即通过>符号明确路径
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代选择器</title><style>div > span{color: brown;}</style>
</head>
<body><div><span>儿子 span</span><p><span>孙子 span</span></p></div>
</body>
</html>
3.并集选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>并集选择器</title><style>span,div,p,em{color: chartreuse;}</style>
</head>
<body><div>div标签</div><p>p标签</p><em>em标签</em><br><br><span>span标签</span>
</body>
</html>
4.交集选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>交集选择器</title><style>p.box{color: brown;}div.dox.picture{color: blueviolet;font: 50px;}</style>
</head>
<body><div class="div box picture">这也是div标签</div><p class="box">p标签，使用类选择器 box</p><p>p标签</p><div class="box">div标签</div>
</body>
</html>
