CSS 后代选择器和CSS 子元素选择器都属于派生选择器的范畴，它们是通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。
其中，CSS 后代选择器（descendant selector）又称为包含选择器，用于选择作为某元素后代的元素。代码中选择器"div a"指的是页面中<div>元素下的所有<a>元素，在没有给第二个<div>应用选择器"niubi"之前，页面上所有的<a>元素都应该显示棕色。如图：
没有给第二个div应用样式
CSS子元素选择器用于选择指定元素的第一代子元素。代码中".niubi>a"会选取设置了"class=niubi"样式的元素的直接子元素<a>，所以第一个<a>元素的颜色发生了变化。而<p>元素中包含的<a>并不是设置了"class=niubi"样式的<div>元素的直接子元素，所以颜色不会发生变化。如图：
第二个div应用样式niubi
后代选择器和子元素选择器的区别：
子元素选择器（child selector）通过“>”进行选择，仅是指它的直接后代（子元素的第一代后代），而后代选择器是通过空格来进行选择，作用于所有子后代元素。
是的，子代选择器只修饰子代的元素，对后代的元素不一定生效例如：
<div class="box">
<div>子代1</div>
<div>
<ul>
<li>01</li>
<li>01</li>
<li>01</li>
<li>01</li>
<li>01</li>
</ul>
<div>ssss</div>
</div>
在这里，
.box>div{
样式
}
只对box的两个子级 div生效，而子级里面的 div 则不生效(除了子级能够继承的样式之外)
如果是 .box div{
样式
}
使用后代选择器，则所有的 box 的后代 div 都会生效
css后代选择器和子选择器的区别介绍：1 css后代选择器
语法：h1 em {color:red} 表示的是从h1开始里面包含的所有的em元素变成红色，h1为祖先，其他的em都是后代，即选中后代，不管是儿子还是孙子，只要是都会被选中，为后代选择器。
2、css子元素选择器
语法：h1>em{color:red} 表示的是从h1开始里面的第一层em元素变成红色，h1为祖先，em为儿子，就像世袭制一样，只能传给儿子，孙子和其他堂亲都不行
