原文

　　簡書原文：https://www.jianshu.com/p/4a776598c69c

大綱

　　1、後代選擇器和子元素選擇器的相關概念
　　2、後代選擇器和子元素選擇器的區別

1、後代選擇器和子元素選擇器的相關概念

1.1、後代選擇器

　　後代選擇器（descendant selector）又稱為包含選擇器。
　　後代選擇器可以選擇作為某元素後代的元素。
　　我們可以定義後代選擇器來創建一些規則，使這些規則在某些文檔結構中起作用，而在另外一些結構中不起作用。

h1 em {color:red;}

1.2、子元素選擇器

　　與後代選擇器相比，子元素選擇器（Child selectors）只能選擇作為某元素子元素的元素。
　　如果您不希望選擇任意的後代元素，而是希望縮小範圍，只選擇某個元素的子元素，請使用子元素選擇器（Child selector）。

h1 > em {color:red;}

2、後代選擇器和子元素選擇器的區別

實例分析

　　CSS中nav ul li ul 與 nav>ul>li 這兩種寫法的區別是什麽，>的作用是什麽？
　　　　1、nav>ul只選擇nav下一級裏面的ul元素，例如上面dom結構裏id為a的ul。
　　　　2、nav ul選擇nav內所包含的所有ul元素，例如上面dom結構裏面id為a、b、c的全部ul。
　　　　3、nav>ul比nav ul限定更嚴格，必須後面的元素只比前面的低一個級別。

<style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }nav ul li ul{
            display:none;
        }nav>ul>li{
            float:left;
            padding:10px;
            border:1px solid blue;
        }nav>ul>li>ul>li{
            padding:10px;
            border-bottom:1px solid #ccc;
        }
</style>
<!--
    >是指只能一代接一代，比如： nav>ul>li>ul>li，必須是下面這樣的
-->
<nav>
    <ul>
        <li>
            <ul>
                <li></li>
            </ul>
        </li>
    </ul>
</nav>
<!--
  然後nav ul li ul只要求後面的元素是在nav標簽下的順序即可，對中間隔了幾層不敏感，比如：
-->
<nav>
     <div>
         <ul>
             <div>
                 <a>
                     <li>
                         <div>
                             <ul>
                                 <li></li>
                             </ul>
                         </div>
                     </li>
                 </a>
             </div>
         </ul>
     </div>
</nav>

後代選擇器和子元素選擇器的區別