1. 后代选择器
官方解释：后代选择器可以选择作为某元素后代的元素。
理解：选择某一标签的后代中，所有的此标签标记
例：ul em {color:red;}
就是选择，h1标签后代中中，所有的em。
代码如下：
如果选择器写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
红色标签就是受影响的标签
1 <ul> 2 <li>List item 1 3 <ol> 4 <li>List item 1-1</li> 5 <li>List item 1-2</li> 6 <li>List item 1-3 7 <ol> 8 <li>List item 1-3-1</li> 9 <li>List item <em>1-3-2</em></li> 10 <li>List item 1-3-3</li> 11 </ol> 12 </li> 13 <li>List item 1-4</li> 14 </ol> 15 </li> 16 <li>List item 2</li> 17 <li>List item 3</li> 18 </ul>
2.子选择器
官方解释：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
理解：选择的元素，必须是直系儿子元素，之间不能有间隔
例：h1 > strong {color:red;}
就是选择，h1的直系儿子中<strong>标签
红色标签就是受影响的标签
1 <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> 2 <h1>This is <em>really <strong>very</strong></em> important.</h1>
第二个<strong>不会变，是因为，第二个<string>不是<h1>的子元素，只是后代元素
3.相邻兄弟选择器
官方解释：可选择紧接在另一元素后的元素，且二者有相同父元素。
理解：选择的是两个紧紧相邻的元素，而且两个元素必须有相同的父元素
例：h1 + p {margin-top:50px;}
选择的是p必须紧跟h1元素后面，而且两个有相同的父元素的两个元素
请看下面这个文档树片段：
红色标签就是受影响的标签
1 <div> 2 <ul> 3 <li>List item 1</li> 4 <li>List item 2</li> 5 <li>List item 3</li> 6 </ul> 7 <ol> 8 <li>List item 1</li> 9 <li>List item 2</li> 10 <li>List item 3</li> 11 </ol> 12 </div>
在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。
请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：
li + li {font-weight:bold;}
注意：在遇到，这样三个或者是多个元素相邻的，兄弟选择器会选择第二个和第三个。