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/