一、子選擇器

還有一個比較有用的選擇器子選擇器，即大於符號(>),用於選擇指定標籤元素的第一代子元素。

這行程式碼會使class名為food下的子元素li（水果、蔬菜）加入紅色實線邊框。

.food>li{border:1px solid red;}/*新增邊框樣式（粗細為1px， 顏色為紅色的實線）*/  

<h1>食物</h1>  
<ul class="food">  
    <li>水果  
        <ul>  
            <li>香蕉</li>  
            <li>蘋果</li>  
            <li>梨</li>  
        </ul>  
    </li>  
    <li>蔬菜  
        <ul>  
            <li>白菜</li>  
            <li>油菜</li>  
            <li>捲心菜</li>  
        </ul>  
    </li>  
</ul>  
 

二、包含（後代）選擇器

包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側程式碼編輯器中的程式碼：

請注意這個選擇器與子選擇器的區別，子選擇器（child selector）僅是指它的直接後代，或者你可以理解為作用於子元素的第一代後代。而後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。

總結：>作用於元素的第一代後代，空格作用於元素的所有後代。

.food li {border:1px solid red;/*新增邊框樣式（粗細為1px， 顏色為紅色的實線）*/}

<ul class="food">  
    <li>水果  
        <ul>  
            <li>香蕉</li>  
            <li>蘋果</li>  
            <li>梨</li>  
        </ul>  
    </li>  
    <li>蔬菜  
        <ul>  
            <li>白菜</li>  
            <li>油菜</li>  
            <li>捲心菜</li>  
        </ul>  
    </li>  
</ul>