1.21 组合选择器

• 后代
• 子元素
• 相邻兄弟元素
• 后续兄弟
• 举例

后代

div p {
    color: red;
}

子元素

div>h1 {
    color: green;
}

相邻兄弟元素

div+p {
    background-color:yellow;
}

后续兄弟

div~p {
    color:blue;
}

举例

<p> p0 相邻兄弟 前 </p>
<div>
    <p> p1 后代 + 子元素 </p>
    <h1> h1 后代 + 子元素</h1>

    <section>
        <p> p2 后代</p>
        <h1> h2 后代</h1>
    </section>
</div>
<p> p0 相邻兄弟后 + 后续兄弟  </p>
<p> p0 后续兄弟 </p>