实践是检验真理的最好办法：把此案例复制到编辑器中，然后挨个测试，看变化，一目了然
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
/*css中“~”是:
A~B选择器 A之后出现的所有B。
两种元素必须拥有相同的父元素，但是B不必直接紧随A。*/
/*p ~ #A {
background: red;
}
p ~ span{
color: red;
}*/
/*css3特有的选择器，A>B 表示选择A元素的所有子B元素(即后代)。
与A B的区别在于，A B选择所有后代元素，而A>B只选择一代(即子代)。*/
/*#D span{
background: green;
}*/
/*#D>span{
background: green;
}*/
/*这里用了逗号，作用是表示用的是相同的css属性*/
p, span{
color: burlywood;
}
</style>
</head>
<body>
<span>one</span>
<p>快乐生活</p>
<div id="D">
<p>身体健康</p>
<div id="A" style="height: 100px;">篮球
<span>最喜欢</span>
</div>
<div id="B" style="height: 100px;">游泳</div>
<div id="A" style="height: 100px;">跑步</div>
<div id="B" style="height: 100px;">旅游</div>
<span>two</span>
</div>
<div id="A" style="height: 100px;">睡觉</div>
<span>three</span>
</body>
</html>