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>

效果：