學(xué)習(xí)前端的朋友們，理解后代選擇器和子代選擇器有什么區(qū)別不？沒搞明白的朋友，跟著小猿圈一起來學(xué)習(xí)一下吧。
后代選擇器用空格，比如A B｛border:1px solid red;｝
子代選擇器用>, 比如A>B｛border:1px solid red;｝
但是，如果你仔細(xì)想想，這倆個概念是不是有重復(fù)的地方，
后代是不是也是子代？
子代不也是后代嗎？
具體兩者的關(guān)系不作討論，我們來看看在css中具體有什么不同？
先上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>后代與子代選擇器的區(qū)別</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>
子代選擇器時效果圖：
后代選擇器時效果圖：
可以說是區(qū)別相當(dāng)?shù)拇罅?，從效果可以看出?/p>
后代指所有后代，而子代單指第一代
果真如此嗎？
我們看看另一個例子：
我們將css代碼進(jìn)行修改，而html代碼不變：
<style>
? ? ? ? .zero ul
? ? ? ? {
? ? ? ? ? ? color:red;
? ? ? ? }
? ? </style>
使用 后代選擇器運行效果圖：
使用子代選擇器運行效果圖：
什么鬼，怎么完全一樣？
請注意這里的修改選項，我并不是直接用li標(biāo)簽，
另外我修改的是顏色屬性。
事實上，上面的結(jié)論仍然是正確的
之所以出現(xiàn)上面的情況，我們需要考慮到繼承，
要知道，color這樣的屬性是可以繼承的，也就是說
子代的字體沒有默認(rèn)顏色，所以它從父親那里繼承
可以，如果是這樣的話，那為什么開始時沒有繼承呢？
答案是：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個是經(jīng)過我實測的，剩下的是查的網(wǎng)絡(luò)上
的資料，準(zhǔn)確性無法確定。
說這些是想弄明白為什么出現(xiàn)了一會效果一樣，
一會又效果不樣的情況。
對css后代選擇器和子代選擇器有個大致的了解了吧，小編自認(rèn)為寫的太清楚了，相信你們也是這么感覺的，哈哈哈，了解這個技能希望對你們工作和學(xué)習(xí)有幫助，怎么樣，喜歡小編的文章嗎？可以來小猿圈學(xué)習(xí)更多，加油咯！
