CSS樣式中"大於號"
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定義其樣式應該這樣:
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中的”大於號”。
現在我們把這個樣式改變一下,程式碼如下:
div > span {
font:10px;
color:blue;
}
這樣就可以實現第一個span標籤與其它兩個顯示不同的樣式。所以我們可以知道CSS中的”大於號”的作用是:在巢狀標籤中,將樣式只作用於兒子輩的標籤,而不作用於孫子輩的標籤。
但是還存在這樣一種情況,如下程式碼:
<div>
<span>
親人
<span>
丁當
</span>
</span>
<span>獨家記憶</span>
<span>離不開你</span>
</div>
此時,這個”大於號”還會起作用嗎?答案是:不會。因為這個孫子輩的span標籤繼承兒子輩的span標籤樣式。
http://blog.163.com/[email protected]/blog/static/22928525201031511426779/