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標簽樣式。

轉載于:https://www.cnblogs.com/s502/archive/2013/06/07/3124089.html

總結

以上是生活随笔為你收集整理的CSS样式中” 大于号”的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。