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

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

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中的大于號表示什么意思呢？

舉例說明：有一個DIV層包含多個span標簽，代碼如下：

<div> 
<span>親人</span> 
<span>獨家記憶</span> 
<span>離不開你</span> 
</div> 

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

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

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

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

遺憾的是這樣不可以，因為div span {……}樣式對div層之下的所有span標簽都起作用，不管是子標簽，還是孫輩的標簽，所以該樣式依然起作用。此時就用到了CSS中的”大于號”。

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

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

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

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

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

此時，這個”大于號”還會起作用嗎？答案是：不會。因為這個孫子輩的span標簽繼承兒子輩的span標簽樣式。

最新評論