繼承在一定程度上讓程序在編寫的過程中更加方便，但是有時(shí)候也會(huì)給我們的程序帶來一定的困擾，所以認(rèn)真的學(xué)習(xí)繼承的原理，以及處理的方法很重要。下面是Css中處理繼承的一個(gè)方法。

在一段CSS代碼中見到一個(gè)大于號(hào)(>)，代碼如下：

BODY#css-zen-garden > DIV#extraDiv2 { 
BACKGROUND-IMAGE:url(../images/bg_face.jpg); 
Z-INDEX: 2; 
POSITION: fixed; 
WIDTH: 205px; 
BOTTOM: 0px; 
BACKGROUND-REPEAT: no-repeat; 
BACKGROUND-POSITION: left bottom; 
HEIGHT: 594px; 
LEFT: 0px 
} 

CSS中的大于號(hào)表示什么意思呢？

舉例說明：有一個(gè)DIV層包含多個(gè)span標(biāo)簽，代碼如下：

<div> 
<span>親人</span> 
<span>獨(dú)家記憶</span> 
<span>離不開你</span> 
</div> 

此時(shí)用CSS定義其樣式應(yīng)該這樣：

div span { 
font:10px; 
color:blue; 
}

但是此時(shí)，需要將第一個(gè)span標(biāo)簽顯示不同的樣式，后兩個(gè)<span>標(biāo)簽樣式不變，怎么辦呢？將第一個(gè)span放到一個(gè)p標(biāo)簽中，這樣可以嗎？代碼如下：

<div> 
<p> 
<span>親人</span> 
</p> 
<span>獨(dú)家記憶</span> 
<span>離不開你</span> 
</div> 

遺憾的是這樣不可以，因?yàn)閐iv span {……}樣式對div層之下的所有span標(biāo)簽都起作用，不管是子標(biāo)簽，還是孫輩的標(biāo)簽，所以該樣式依然起作用。此時(shí)就用到了CSS中的”大于號(hào)”。

現(xiàn)在我們把這個(gè)樣式改變一下，代碼如下：

div > span { 
font:10px; 
color:blue; 
}

這樣就可以實(shí)現(xiàn)第一個(gè)span標(biāo)簽與其它兩個(gè)顯示不同的樣式。所以我們可以知道CSS中的”大于號(hào)”的作用是：在嵌套標(biāo)簽中，將樣式只作用于兒子輩的標(biāo)簽，而不作用于孫子輩的標(biāo)簽。

但是還存在這樣一種情況，如下代碼：

<div> 
<span>親人 
<span>丁當(dāng)</span> 
</span> 
<span>獨(dú)家記憶</span> 
<span>離不開你</span> 
</div>

此時(shí)，這個(gè)”大于號(hào)”還會(huì)起作用嗎？答案是：不會(huì)。因?yàn)檫@個(gè)孫子輩的span標(biāo)簽繼承兒子輩的span標(biāo)簽樣式。

最新評論