CSS样式中” 大于号”
CSS樣式中”?大于號(hào)”
???????在一段CSS代碼中見(jiàn)到一個(gè)大于號(hào)(>)，代碼如下：
???????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中的大于號(hào)表示什么意思呢？
舉例說(shuō)明：有一個(gè)DIV層包含多個(gè)span標(biāo)簽，代碼如下：
<div>
???????<span>親人</span>
?
???????<span>獨(dú)家記憶</span>
???????<span>離不開(kāi)你</span>
</div>
此時(shí)用CSS定義其樣式應(yīng)該這樣：
div span {
???????font:10px;
???????color:blue;
}
但是此時(shí)，需要將第一個(gè)span標(biāo)簽顯示不同的樣式，后兩個(gè)<span>標(biāo)簽樣式不變，怎么辦呢？將第一個(gè)span放到一個(gè)p標(biāo)簽中，這樣可以嗎？代碼如下：
<div>
???????<p>
??????????????<span>親人</span>
???????</p>
???????<span>獨(dú)家記憶</span>
???????<span>離不開(kāi)你</span>
</div>
???????遺憾的是這樣不可以，因?yàn)?span lang="en-us">div span {……}樣式對(duì)div層之下的所有span標(biāo)簽都起作用，不管是子標(biāo)簽，還是孫子輩的標(biāo)簽，所以該樣式依然起作用。此時(shí)就用到了CSS中的”大于號(hào)”。
???????現(xiàn)在我們把這個(gè)樣式改變一下，代碼如下：
div > span {
???????font:10px;
???????color:blue;
}
這樣就可以實(shí)現(xiàn)第一個(gè)span標(biāo)簽與其它兩個(gè)顯示不同的樣式。所以我們可以知道CSS中的”大于號(hào)”的作用是：在嵌套標(biāo)簽中，將樣式只作用于兒子輩的標(biāo)簽，而不作用于孫子輩的標(biāo)簽。
?
但是還存在這樣一種情況，如下代碼：
<div>
???????<span>
親人
??????????????<span>
?????????????????????丁當(dāng)
</span>
</span>
???????<span>獨(dú)家記憶</span>
???????<span>離不開(kāi)你</span>
</div>
此時(shí)，這個(gè)”大于號(hào)”還會(huì)起作用嗎？答案是：不會(huì)。因?yàn)檫@個(gè)孫子輩的span標(biāo)簽繼承兒子輩的span標(biāo)簽樣式。
轉(zhuǎn)載于:https://www.cnblogs.com/s502/archive/2013/06/07/3124089.html
總結(jié)
以上是生活随笔為你收集整理的CSS样式中” 大于号”的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Http协议中的数据传送之多重表单提交-
- 下一篇： CSS 魔法系列：纯 CSS 绘制基本图