关系选择器

之所以被命名为 关系选择器（Combinator），这是因为它们在其他选择器之间和其他选择器与文档内容的位置之间建立了一种有用的关系的缘故。

后代选择器

后代选择器 是单个空格（" "）字符，可以组合两个或多个选择器。

单个空格

用单个空格将两个选择器隔开，表示选中空格前面元素的后代元素

代码示例

<div class='content'>
   <h1 id='title'>Hello World!</h1>
   <p>this is an example</p>
</div>

.content #title{
/** 选择 class 为 content 的元素的后代 id 为 title 的元素 */
/** 选择 div 的后代元素中第一项 h1 */
  background-color:yellow;
}
.content p{
/** 选择 class 为 content 的元素的后代类型为 p 的元素 */
/** 选择 div 的后代元素中第二项 p */
  color:red;
}

子代关系选择器

子代关系选择器 是个大于号 >，只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。

>

用 > 连接两个或多个选择器，选择 > 前面元素的直接子元素

代码示例

<ul>
    <li>ul son1</li>
    <li>ul son2
        <ol>
            <li>li son1 ul grandson1</li>
            <li>li son2 ul grandson2</li>
        </ol>
    </li>
</ul>

ul > li {
  /** 选择 ul 元素的 直接子元素 li */
  /** ul 元素的后代元素里面除了第一项、第二项 li 元素是它的直接子元素以外，其他的都不是直接子元素，所以不会被选中 */
  border-top:1px solid red;
} 

相邻兄弟选择器

相邻兄弟选择器 是个 +，用来选中恰好处于另一个在继承关系上同级的元素旁边的元素，即选择有相同父元素的兄弟元素。

+

用 + 连接两个选择器，选择 + 前面元素的相邻兄弟元素（用 + 连接的两个元素的父元素相同）

代码示例

<div>
   <h1>Hello World!</h1>
   <p>bother1</p>
   <p>bother2</p>
</div>

h1 + p {
  /** 选择与 h1 元素相邻的兄弟元素 p 元素，只选择 div 元素的后代元素中第二项 p 元素（bother1） */
  /** h1 元素的兄弟元素是 p 元素，但与 h1 相邻的兄弟元素只有第一个 p 元素，所以只会选中第一个 p 元素 （bother1）*/
  color:blue;
} 

通用兄弟选择器

通用兄弟选择器 是个 ~，用来选择一个元素的兄弟元素，无论它们是否相邻都可以选中。

~

用 ~ 连接两个选择器，选择前面元素的所有兄弟元素（用 ~ 连接的两个元素的父元素相同）

代码示例

<div>
   <h1>Hello World!</h1>
   <p>bother1</p>
   <span>bother2</span>
   <p>bother3</p>
</div>

h1 ~ p {
  /** 选择 h1 元素的兄弟元素 p 元素，会选择 div 元素的后代元素中所有 p 元素（bother1，bother3） */
  /** h1 元素的兄弟元素是 p 元素、span元素，但 ~ 后面连接的是 p，表示只选择 h1 的兄弟元素
  且类型为 p 的元素，所以不会选中 span 元素*/
  color:green;
}