格式： A元素 某组合选择器 B元素
后代选择器（空格）
后代选择器，也可称之为“子子孙孙选择器”，它会选中其儿子、孙子、曾孙...子子孙孙。即，它会选中A元素包裹的每一个B元素，并对选中的B元素应用样式。
<head>
<style>
div p{
background: yellow;
}
</style>
</head>
<body>
<div>
<p>我是div的儿子p，被选中了，背景变成了黄色</p>
<p>我是div的儿子p，被选中了，背景变成了黄色</p>
<span><p>我是div的孙子p，被选中了，背景变成了黄色</p></span>
<div>
<p>我不在div中，样式没变化</p>
</body>
子元素选择器（>）
子元素选择器，只会选中儿子元素，而不会选中孙子、曾孙、曾曾孙...即，它会选中A元素直接包裹的B元素，并对选中的B元素应用样式。
<head>
<style>
div>p{
background: yellow;
}
</style>
</head>
<body>
<h1>我是h1</h1>
<div>
<h2>我是h2</2>
<p>我是div直接包裹的儿子p，被选中了，背景变成了黄色</p>
<p>我是div直接包裹的儿子p，被选中了，背景变成了黄色</p>
<span>
<p>我先被span包裹再被div包裹，是div的孙子p,没有被选中,样式没变化</p>
</span>
<div>
<p>我不在div中，样式没变化</p>
</body>
相邻兄弟选择器（+）
相邻兄弟选择器，会选中紧接在A元素后的B元素，并对这一个B元素应用样式。A、B有相同的父元素。
<head>
<style>
div+p{
background: yellow;
}
</style>
</head>
<body>
<h1>我是h1</h1>
<p>我是div前面的第一个p，样式没变化</p>
<div>
<h2>我是h2</2>
<p>我是div的儿子p，样式没变化</p>
<div>
<p>我是div后面的第一个p，被选中了，背景变成了黄色</p>
<p>我是div后面的第二个p，样式没变化</p>
</body>
后续兄弟选择器（~）
后续兄弟选择器，会选中A元素后面的每一个B元素，并对这些B元素应用样式。A、B有相同的父元素。
<head>
<style>
div~p{
background: yellow;
}
</style>
</head>
<body>
<p>我是div前面的p，样式没变化</p>
<p>我是div前面的p，样式没变化</p>
<div>
<p>我是div里面的p，样式没变化</p>
<p>我是div里面的p，样式没变化</p>
<div>
<p>我是div后面的p，被选中了，背景变成了黄色</p>
<p>我是div后面的p，被选中了，背景变成了黄色</p>
</body>
