關於CSS樣式中大於號的使用及Css中處理繼承方法

繼承給我們的程式帶來一定的困擾，所以認真的學習繼承的原理，下面有個不錯的示例，一個處理繼承的一個方法，感興趣的朋友可以參考下

繼承在某種程度上讓程式在編寫的過程中更加方便，但是有時也會為我們的程式帶來一定的困擾，所以認真的學習繼承的原理，以及處理的方法很重要。下面是Css中處理繼承的一個方法。

在一段CSS程式碼中見到一個大於號(>)，程式碼如下：

BODY#css-zen-garden > p#extrap2 { 
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中的大於號表示什麼意思呢？

範例說明：有一個p層包含多個span標籤，程式碼如下：

<p> 
<span>亲人</span> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>

##此時用CSS定義其樣式應該是這樣：

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

但此時，需要將第一個span標籤顯示不同的樣式，後兩個標籤樣式不變，怎麼辦呢？將第一個span放到一個p標籤中，這樣可以嗎？程式碼如下：

<p> 
<p> 
<span>亲人</span> 
</p> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>

遺憾的是這樣不可以，因為p span {…}樣式對p層之下的所有span標籤都起作用，不管是子標籤，還是孫輩的標籤，所以這個樣式仍然運作。此時就用到了CSS中的」大於號」。

現在我們把這個樣式改變一下，程式碼如下：

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

這樣就可以實作第一個span標籤與其它兩個顯示不同的樣式。所以我們可以知道CSS中的」大於號」的作用是：在嵌套標籤中，將樣式只作用於兒子輩的標籤，而不作用於孫子輩的標籤。

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

<p> 
<span>亲人 
<span>丁当</span> 
</span> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>

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

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

CSS中的inherit使用分析

CSS樣式的覆寫規則

以上是關於CSS樣式中大於號的使用及Css中處理繼承方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！