CSS + > ~ 選擇器

 一、后代選擇器

 選取指定元素的后代元素

與子元素選擇器相比，后代選擇器選取的不一定是直接后代（兒子），而是作用於所有后代元素（兒子、孫子、重孫…）都可以。

實例：（選取類為 box的元素的 id為aa后代元素）

HTML

<div class="box">
    <p>emmmmmmmmmm……</p>
    <p>23333333333333333……</p>
    <div>
    <p>wwwwwwwwwwww</p>
    <p id="aa">QQQQQQQQQQ</p>
    </div>    
</div>

CSS

.box #aa{ background: #aaf;  }

 

二、（>）子元素選擇器

選取某個元素的直接后代元素

與后代元素選擇器相比，子元素選擇器  選取的一定是直接后代（兒子）

實例：（選取所有類為box的元素，后代p元素）

HTML

<div class="box">
    <p>emmmmmmmmmm……</p>
    <p>23333333333333333……</p>
    <div>
    <p>wwwwwwwwwwww</p>
    <p id="aa">QQQQQQQQQQ</p>
    </div>    
</div>

CSS

.box>p{ background: #aaf;}

 

三、（+）相鄰兄弟選擇器

選擇緊連着另一元素后的元素，二者具有相同的父元素。只會選擇的一個相鄰的匹配元素

實例：（選取h1后面的h2元素）

HTML

<div class="box">
    <h1>ssssssssssssssss</h1>
    <h2>emmmmmmmmmm……</h2>
    <h2>23333333333333333……</h2>
    <div>
    <p>wwwwwwwwwwww</p>
    <p id="aa">QQQQQQQQQQ</p>
    </div>    
</div>

CSS

h1+h2{ background: #aaf;  }

 

四、（~）后續兄弟選擇器

選取所有指定元素之后的相鄰兄弟元素。

與相鄰兄弟元素選擇器 相比，

相鄰兄弟元素選擇器 只是選擇緊跟着的兄弟元素，

后續元素選擇器  選擇所有符合條件的兄弟元素

實例：（選取h1元素后的所有，相鄰的兄弟元素h2元素）

HTML

<div>
    <h1>ssssssssssssssss</h1>
    <h2>emmmmmmmmmm……</h2>
    <p>wwwwwwwwwwww</p>
    <h2>23333333333333333……</h2>
<div>

CSS

h1~h2{ background: #aaf;   }