CSS 组合选择符

CSS3中，一共4种组合选择符：

1、后代选取器(以空格分隔)：所有的后代都会使用此格式

div p

{

    background-color:yellow;

}

2、子元素选择器(以大于号分隔）：只有 第一个后代会使用此格式

div>p

{

    background-color:yellow;

}

不能使用此格式：<div> <span><p>I will not be styled.</p></span> </div>

把<span>这一层去掉就可以使用了。

3、相邻兄弟选择器（以加号分隔）：可选择 紧接在另一元素后的元素，且二者有相同父元素

div+p

{

    background-color:yellow;

}

适用于 

<div>I live in Duckburg</div>

<p>My best friend is Mickey.</p>

4、普通兄弟选择器（以破折号分隔）：只要处于同一个父类下，处于同级，满足先后顺序，就可以生效。

div~p

{

    background-color:yellow;

}

如：

<p>段落1，在div上方</p>

<div></div>

<button>haha</button>

<p>段落2，在div下方</p>

<span><p>段落3，在div下方的span内</p></span>

运行结果：