web CSS的知识- 关于后代选择器，子选择器，兄弟选择器的使用

1. 后代选择器
官方解释：后代选择器可以选择作为某元素后代的元素。
理解：选择某一标签的后代中，所有的此标签标记
例：ul em {color:red;}
就是选择，h1标签后代中中，所有的em。
代码如下：
如果选择器写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。
红色标签就是受影响的标签

 <ul>
   <li>List item 1
     <ol>
       <li>List item 1-1</li>
       <li>List item 1-2</li>
       <li>List item 1-3
         <ol>
           <li>List item 1-3-1</li>
           <li>List item <em>1-3-2</em></li>
           <li>List item 1-3-3</li>
         </ol>
       </li>
       <li>List item 1-4</li>
     </ol>
   </li>
   <li>List item 2</li>
   <li>List item 3</li>
 </ul>

2.子选择器
官方解释：与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
理解：选择的元素，必须是直系儿子元素，之间不能有间隔
例：h1 > strong {color:red;}
就是选择，h1的直系儿子中<strong>标签
红色标签就是受影响的标签

 <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
 <h1>This is <em>really <strong>very</strong></em> important.</h1>

第二个<strong>不会变，是因为，第二个<string>不是<h1>的子元素，只是后代元素
3.相邻兄弟选择器
官方解释：可选择紧接在另一元素后的元素，且二者有相同父元素。
理解：选择的是两个紧紧相邻的元素，而且两个元素必须有相同的父元素
例：h1 + p {margin-top:50px;}
选择的是p必须紧跟h1元素后面，而且两个有相同的父元素的两个元素
请看下面这个文档树片段：
红色标签就是受影响的标签

 <div>
 <ul>
 　　<li>List item 1</li>
 　　<li>List item 2</li>
 　　<li>List item 3</li>
 </ul>
 <ol>
 　　<li>List item 1</li>
 　　<li>List item 2</li>
 　　<li>List item 3</li>
 </ol>
 </div>

在上面的片段中，div 元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。
请记住，用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：
li + li {font-weight:bold;}
注意：在遇到，这样三个或者是多个元素相邻的，兄弟选择器会选择第二个和第三个。