CSS的子選擇器與後代選擇器的區別

子選擇器

引用連接：http://blog.csdn.net/u012110719/article/details/41171517

還有一個比較有用的選擇器子選擇器，即大於符號(>),用於選擇指定標籤元素的第一代子元素。如右側代碼編輯器中的代碼：

.food>li{border:1px solid red;}

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

<style type="text/css">
.food>li{border:1px solid red;}/*添加邊框樣式（粗細爲1px， 顏色爲紅色的實線）*/
</style>

<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>

包含(後代)選擇器

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

.first  span{color:red;}

這行代碼會使第一段文字內容中的「膽小如鼠」字體顏色變爲紅色。

請注意這個選擇器與子選擇器的區別，子選擇器（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>