[转]CSS子选择器与后代选择器-原创手记-慕课网

注：之前一直不混淆子选择器和后代选择器的关系，今天看到一篇文章很不错，一下子明白了，特此转载。
通俗的讲就是：儿子一定是后代，但是后代不一定是儿子。

css子元素选择器和后代选择器在功能描述上非常相同，但是他们其实是有区别的、

本文章通过两个简单的实例向大家介绍子元素选择器与后代选择器的区别，需要的朋友可以参考一下。

首先我们来了解一下[子元素选择器]与[后代选择器]的基本语法。

语法

子元素选择器的语法如下：

div>ul{color：red；}

子元素选择器使用大于号">"做为连接符，子元素选择器只能选择作为某元素子元素的元素

后代选择器的语法如下：

h1 em{color:red;}

后代选择器可以选择作为某元素后代的元素,父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。

二者区别：

我们通过一个实例来讲解子选择器与后代选择器的区别。

先来看一下后代选择器div p的效果

<html>
    <head>
        <style>
              div p{ background-color:yellow;}
        </style>
    </head>
<body>
    <div> 
        <p>子元素选择器</p> 
        <span>
            <p>后代选择器</p>
        </span>
    </div>
</body>
</html>

运行结果如图：

后代选择器

再来看一下子选择器div>p的效果

<html>
    <head>
        <style>
              div > p{ background-color:yellow;}
        </style>
    </head>
<body>
    <div> 
        <p>子元素选择器</p> 
        <span>
            <p>后代选择器</p>
        </span>
    </div>
</body>
</html>

运行结果如图：

子选择器

从上面实例可以看出子选择器只作用于其第一代元素，而后代选择器作用于N（N为自然数）代元素。