1、子代选择器（>）

子代选择器主要用来选择某个元素的第一级子元素，只能用来选择子代，不能多个子代（div>span>p>h6），设置好后子代后的子孙都会受到影响

h1>strong{
    color:red;
}
<h1><strong>1</strong></h1>                        //变颜色
<h1><em><strong>1</strong></em></h1>    //不变颜色

2、兄弟选择器（+、~）

（一）临近兄弟选择器

该选择器使用加号“+”来连接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。

p+h2{
    color:red;
}
<p>1</p>            //不变颜色
<h2>1</h2>        //变颜色

（二）普通兄弟选择器

该选择器使用“~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。

p+h2{
    color:red;
}
<p>1</p>            //不变颜色
<h2>1</h2>        //变颜色
<h2>2</h2>        //变颜色
<h2>3</h2>        //变颜色
<h2>4</h2>        //变颜色