CSS之層次選擇器

后代選擇器

作用於某個元素層次下的元素

<style>
        body p{
            background: red;
        }
</style>

<p>p1</p>
<p>p2</p>
<p>p3</p>

效果：

子選擇器

作用於某個元素的子元素

<style>
        body>p{
            background:#ff2ff7;
        }
</style>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>

效果：

相鄰兄弟選擇器

緊接在元素后面的元素

<style>
      .active+p{
            background: #a13d30;
        }
</style>
<p>p0</p>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>

效果：

通用兄弟選擇器

A~B 選擇A元素之后所有同層級B元素。

<style>
      .active~p{
            background: #a13d30;
        }
</style>
<p>p0</p>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>

效果：