包含选择符（E F）
选择所有被E元素包含的F元素
- 与 子选择符(E>F) 不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#firstdiv p{
color: #0000FF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="firstdiv">
<p>第一个段落。</p>
<p>第二个段落。</p>
<ul>
<li>Java</li>
<li>C#</li>
</ul>
<div>
<p>第三个段落。</p>
</div>
</div>
</body>
</html>
子选择符（E>F）
选择所有作为E元素的子元素F
- 与 包含选择符(E F) 不同的是，子选择符只能命中子元素，而不能命中孙辈
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#firstdiv>p{
color: #0000FF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="firstdiv">
<p>第一个段落。</p>
<p>第二个段落。</p>
<ul>
<li>Java</li>
<li>C#</li>
</ul>
<div>
<p>第三个段落。</p>
</div>
</div>
</body>
</html>
相邻选择符（E+F）
选择紧贴在E元素之后F元素，元素E与F必须同属一个父级
- 与 兄弟选择符(E~F) 相同的是，相邻选择符也是选择同级的元素F；不同的是，相邻选择符只会命中符合条件的那个毗邻的兄弟元素（即紧挨着E元素之后的第一个F元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul+div{
color: #0000FF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="firstdiv">
<p>第一个段落。</p>
<p>第二个段落。</p>
<ul>
<li>Java</li>
<li>C#</li>
</ul>
<div>
<p>第三个段落。</p>
</div>
<div>
<p>第四个段落。</p>
</div>
</div>
</body>
</html>
兄弟选择符（E~F）
选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级
- 需要注意的是，选择的只是同级的元素F，后代中的元素F不会被选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul~div{
color: #0000FF;
font-weight: bold;
}
</style>
</head>
<body>
<div id="firstdiv">
<p>第一个段落。</p>
<p>第二个段落。</p>
<ul>
<li>Java</li>
<li>C#</li>
</ul>
<div>
<p>第三个段落。</p>
</div>
<div>
<p>第四个段落。</p>
</div>
</div>
</body>
</html>