+ 相邻兄弟选择器
~ 兄弟选择器 不相邻也没关系
<!DOCTYPE html>
<html>
<head>
<title>ThankIT</title>
</head>
<body>
<style type="text/css">
.case-1 h1+p {
color :#e47b7b;
}
.case-2 h1~p {
color :#e47b7b;
}
</style>
<div class="case-1">
<h1>h1 相邻兄弟选择器</h1>
<p>我是紧邻 h1 的 p 我变红</p>
<p>我不是紧邻的 p 我没有效果</p>
</div>
<div class="case-2">
<h1>h1 兄弟选择器 不相邻也没有关系</h1>
<p>我是紧邻 h1 的 p </p>
<div>我是个 div </div>
<p>我不是紧邻的 p </p>
</div>
</body>
</html>

> 直接后代
X Y 所有的后代
<!DOCTYPE html>
<html>
<head>
<title>ThankIT</title>
</head>
<body>
<style type="text/css">
ul {
list-style: none;
margin:0;
padding: 5px;
}
.case-3 > ul {
border:10px solid #f9f2f4;
}
.case-4 ul {
border:10px solid #f9f2f4;
}
</style>
<div class="case-3" style="margin-bottom: 15px;">
<ul>
<li>直接后代</li>
<li>直接后代</li>
<li>直接后代</li>
<li>
<ul>
<li>二代</li>
<li>二代</li>
<li>二代</li>
</ul>
</li>
</ul>
</div>
<div class="case-4">
<ul>
<li>直接后代</li>
<li>直接后代</li>
<li>直接后代</li>
<li>
<ul>
<li>二代</li>
<li>二代</li>
<li>二代</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

参考
30个你必须记住的CSS选择符