CSS 组合器
示例
总览
注意：同级选择器的目标是源文档中紧随其后的元素。CSS本质上（级联）不能针对先前或父元素。但是，使用flexorder属性，可以在可视媒体上模拟先前的同级选择器。
后代组合器：selectorselector
由至少一个空格字符（）表示的后代组合器选择作为已定义元素的后代的元素。该组合器选择元素的所有后代（从向下的子元素开始）。
div p {
color:red;
}<div>
<p>My text is red</p>
<section>
<p>My text is red</p>
</section>
</div>
<p>My text is not red</p>JSBin现场演示
在上面的示例中，选择了前两个<p>元素，因为它们都是的后代<div>。
儿童组合器：selector>selector
子（>）组合子用于选择那些元件的儿童，或直系后代的指定元素。
div > p {
color:red;
}<div>
<p>My text is red</p>
<section>
<p>My text is not red</p>
</section>
</div>JSBin现场演示
上面的CSS仅选择第一个<p>元素，因为它是直接从a派生的唯一段落<div>。
<p>未选择第二个元素，因为它不是的直接子元素<div>。
相邻的同级组合器：selector+selector
相邻的同级（+）组合器选择一个紧随指定元素之后的同级元素。
p + p {
color:red;
}<p>My text is not red</p> <p>My text is red</p> <p>My text is red</p> <hr> <p>My text is not red</p>
JSBin现场演示
上面的例子中只选择那些<p>其元件直接前面通过另一个<p>元件。
普通同级组合器：selector~selector
常规的同级（~）组合器选择指定元素之后的所有同级。
p ~ p {
color:red;
}<p>My text is not red</p> <p>My text is red</p> <hr> <h1>And now a title</h1> <p>My text is red</p>
JSBin现场演示
上面的例子中选择所有<p>被元件之前由另一<p>元件，无论它们是否是紧邻。