1. 复合选择器

选择器	名称	描述	版本
s1, s2, s3{}	群组选择器	多个选择器同时使用	1
s1 s2{}	后代选择器	指定选择器的后代元素	1
s1 > s2{}	子类选择器	指定选择器的子元素	2
s1 + s2{}	第一小弟选择器	指定选择器的相邻元素	2
s1 ~ s2{}	弟弟们选择器	指定选择器的后面元素 3

2. 群组选择器

概念： 群组选择器就是将多个选择器通过逗号分隔，同时设置一组样式。

布局：

<p>秦时明月汉时关</p>
<h1 class="a">万里长征人未还</h1>
<span id="b">但使龙城飞将在</span>
<div>不教胡马度阴山</div>

样式：

p, .a, #b, div{ 
	color:red;
}

3. 后代选择器

概念： 后代选择器可以抓取父元素内部的所有子元素，不在乎层次深度。

布局：

<div id="嬴政">
    <div>扶苏</div>
    <div>胡亥</div>
</div>
<div id="曹操">
    <div>曹丕
        <div>曹叡</div>
    </div>  
    <div>曹植</div>
</div>

样式：

#曹操 div{ 
	border :1px solid red;
	margin:	10px;
}

父子元素也是有限定的，即不是谁都可以当另一个元素的父元素，如`<div>` 可以包含 `<p>` ，`<p>` 可以包含 `<h#>` ，但是 `<p>` 中无法包含 `<div>` 。

4. 子类选择器

概念： 选择父元素内部的所有儿子元素，只匹配第一层深度。

布局：

<div id="fuqin">父亲
    <div id="a">大儿子</div>
    <div id="b">二儿子
        <div id="c">大孙子</div>
        <div id="d">二孙子
            <div id="e">大重孙子</div>
        </div>
    </div>
</div>

样式：

#ererzi > div{ 
	border :1px solid red;
	margin:	10px;
}

5. 第一小弟选择器

概念：

• 匹配相邻的下一个同级指定元素，若下个同级元素和你所指定的不匹配，则CSS失效。
• 必须同时满足"相邻"和"类型匹配"这两点，否则选择器失效。

布局：

<p>声声慢</p>
<div>寻寻觅觅，冷冷清清，凄凄惨惨戚戚。</div>
<p>乍暖还寒时候，最难将息。</p>
<p>三杯两盏淡酒，怎敌他晚来风急？</p>
<p>雁过也，正伤心，却是旧时相识。</p>
<p>满地黄花堆积，憔悴损，如今有谁堪摘？</p>
<p>守着窗儿，独自怎生得黑？</p>
<p>梧桐更兼细雨，到黄昏点点滴滴。</p>
<p>这次第，怎一个愁字了得！</p>

样式：

div + p{ 
	color:red;
}

6. 弟弟们选择器

概念： 匹配后面的同级所有的指定元素，不在乎是否相邻。

布局：

<p>这是一首诗歌</p>
<p>作者是李白</p>
<h1>静夜思</h1>
<div>窗前明月光</div>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>

样式：

h1 ~ p{
	color:red;
}