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 绘制基本图