CSS组合选择器全

CSS组合选择器可以直观的知道两个选择器之间的关系。

在 CSS3 中包含了四种组合方式:

1. 后代选取器(以空格分隔)
2. 子元素选择器(以大于号分隔）
3. 相邻兄弟选择器（以加号分隔）
4. 普通兄弟选择器（以波浪号分隔）

后代选择器

所谓后代，就是一个元素包含在另一个元素里面，例如<div><p></p></div>这里p就是div的后代

后代选择器匹配所有指定元素的后代元素。

div p { background-color:yellow; }选取所有在div里面的p，不管是子元素还是孙元素。

子元素选择器

子元素选择器就是后代选择器的特例，一定要是直接后代才行，如果是孙辈以下的就不行
div>p { background-color:yellow; }
<div><p>可以被选择，是直接后代</p></div>
<div><span><p>不可以被选择。不是直接后代</p></span></div>

相邻兄弟选择器（Adjacent sibling selector）

可选择紧接在另一元素后的元素，且二者有相同父元素。（只能选择之后的第一个兄弟）

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

div+p { background-color:yellow; }

1、<div>brother</div><p>可以被选择</p>
2、<div>brother</div><span></span><p>不可以被选择,我前面有个span，不是相邻的兄弟节点了</p>
3、
<div>brother</div>
<p>我可以被选择</p>
<p>我不能被选择了，我是第二个p</p>

普通相邻兄弟选择器

普通兄弟选择器选取所有指定元素的相邻兄弟元素。

只要是有相同父亲元素的所有之后兄弟元素都会被选取，不管是否相邻
W3c普通相邻兄弟选择器实例