后代选择器和子元素选择器的区别
作者：
秒速五厘米
文章简介：
后代选择器（descendant selector）又称为包含选择器。 后代选择器可以选择作为某元素后代的元素。 我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
1、后代选择器和子元素选择器的相关概念 2、后代选择器和子元素选择器的区别
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>