學習前端的朋友們，理解後代選擇器和子代選擇器有什麼區別不？沒搞明白的朋友，跟着小猿圈一塊兒來學習一下吧。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後代選擇器和子代選擇器有個大體的瞭解了吧，小編自認爲寫的太清楚了，相信大家也是這麼感受的，哈哈哈，瞭解這個技能但願對大家工做和學習有幫助，怎麼樣，喜歡小編的文章嗎？能夠來小猿圈學習更多，加油咯！