学习前端的朋友们，理解后代选择器和子代选择器有什么区别不？没搞明白的朋友，跟着小猿圈一块儿来学习一下吧。javascript
后代选择器用空格，好比A B｛border:1px solid red;｝css
子代选择器用>, 好比A>B｛border:1px solid red;｝html
可是，若是你仔细想一想，这俩个概念是否是有重复的地方，前端
后代是否是也是子代？java
子代不也是后代吗？网络
具体二者的关系不做讨论，咱们来看看在css中具体有什么不一样？学习
先上代码：字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代与子代选择器的区别</title>
<!--<link rel="stylesheet" type="text/css" href="*.css"/>-->
<script language="javascript" type="text/javascript"></script>
<style>
.zero>li
{
border:1px solid red;
}
</style>
</head>
<body>
<ul class="zero" >
<li>我是祖先</li>
<ul>zero
<li>我是第二代</li>
<ul>
<li>
我是第三代
</li>
</ul>
</ul>
</ul>
</body>
</html>
子代选择器时效果图：code
后代选择器时效果图：htm
能够说是区别至关的大了，从效果能够看出：
后代指全部后代，而子代单指第一代
果然如此吗？
咱们看看另外一个例子：
咱们将css代码进行修改，而html代码不变：
<style>
.zero ul
{
color:red;
}
</style>
使用 后代选择器运行效果图：
使用子代选择器运行效果图：
什么鬼，怎么彻底同样？
请注意这里的修改选项，我并非直接用li标签，
另外我修改的是颜色属性。
事实上，上面的结论仍然是正确的
之因此出现上面的状况，咱们须要考虑到继承，
要知道，color这样的属性是能够继承的，也就是说
子代的字体没有默认颜色，因此它从父亲那里继承
能够，若是是这样的话，那为何开始时没有继承呢？
答案是：border属性没法继承，像border同样没法继承
的属性还有：
display、margin、border、padding、
background、height、min-height、max-height、
width、min-width、max-width、overflow、position、
left、right、top、bottom、z-index、float、clear、
table-layout、vertical-align、page-break-after、
page-bread-before和unicode-bidi。
这其中前面4个是通过我实测的，剩下的是查的网络上
的资料，准确性没法肯定。
说这些是想弄明白为何出现了一会效果同样，
一会又效果不样的状况。
对css后代选择器和子代选择器有个大体的了解了吧，小编自认为写的太清楚了，相信大家也是这么感受的，哈哈哈，了解这个技能但愿对大家工做和学习有帮助，怎么样，喜欢小编的文章吗？能够来小猿圈学习更多，加油咯！