CSS选择器，+ ，＞ 和 ~

大于符号 >

大于符号选择的是当前元素的直接子元素，孙子元素或者更内层的元素不选择

<div class="box">
    <p>001</p>
    <div>
        <p>002</p>
        <p>003</p>
    </div>
    <p>004</p>
</div>

.box p{ 
   /** 表示 class 为 box 的 div 下所有的 p 标签即内容为 001、002、003、004的p标签/ 
}

.box > p {
    /** 表示 class 为 box 的div 下的直接的子元素 p 即内容为 001、004 的p标签/
}

加号 +

加号选择的是当前元素的后面的第一个兄弟元素，两个元素必须有同一个父元素

<div>
    <p>001</p>
    <div class="box">
        <p>002</p>
    </div>
    <p>003</p>
    <p>004</p>
</div>

.box + p{
    /** 表示 class 为 box 的 div 后方同层级的第一个 p 元素即内容为 003 的 p 标签/
}

取代符号 ~

表示后方同层级的全部元素

<div>
    <p>001</p>
    <div class="box">
        <p>002</p>
    </div>
    <p>003</p>
    <p>004</p>
</div>

.box ~ p{
    /** 表示 class 为 box 的 div 后方同层级的所有 p 元素即内容为 003、004 的 p 标签/
}