一.介紹

• 1.子類選擇器

  子類選擇器僅僅指的是父元素的直接後代，大家可以理解為僅作用於第一代子元素，通過“>”進行選擇。
  

• 2.後代選擇器

  後代選擇器則指的是作用於所有後代元素，通過空格來進行選擇。
  
  話不多說，接下來通過程式碼給大家演示。
  

二.舉例

<ul class="clothes">
        <li>衣服
            <ul>
                <li>T恤</li>
                <li>襯衣</li>
                <li
 
>短袖</li>
            </ul>
        </li>
        <br>
        <li>褲子
            <ul>
                <li>牛仔褲</li>
                <li>休閒褲</li>
                <li>七分褲</li>
            </ul>
        </li>
    </ul>

這是沒有任何樣式的，我們在瀏覽器中顯示如下：

接下來我們使用子類選擇器”.clothes>li”表示給class為clothes的子類li(第一代子類)新增一個紅色邊框。

    <script>
       $(function () {
          $(".clothes>li").css("border","1px solid red");
       });
    </script>

瀏覽器顯示效果如下圖所示：

我們可以看到只有第一代子類為li（衣服、褲子）的加上了紅色邊框，而其他的如T恤、牛仔褲等等並沒有任何樣式。

接下來我們換用後代選擇器”.clothes li”表示給class為clothes所有後代為li的子類新增一個紅色邊框。

    <script>
        $(function () {
           $(".clothes li").css("border","1px solid red");
        });
    </script>

瀏覽器顯示效果如下圖所示：

我們可以看到所有後代為li的元素都加上了紅色邊框，不僅僅是第一代子元素了。

三.總結

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