CSS選擇符詳解之關(guān)系選擇符篇
來源:解決方案 2012-10-29
相信大家都對(duì)CSS選擇符都不陌生,選擇符包含:元素選擇符、關(guān)系選擇符、屬性選擇符、偽類選擇符、偽對(duì)象選擇符。在眾多的選擇符中,可以讓我們根據(jù)自己的需要更加靈活性的選擇合適的選擇符來對(duì)樣式進(jìn)行編寫,達(dá)到最大的質(zhì)量和效率。
今天就為大家介紹下選擇符中的關(guān)系選擇符,“關(guān)系”這可是一等一的大事啊,我們得理清楚,這樣做事情才能更加的有效率。不然在CSS中有你受的,哈哈。關(guān)系選擇符有四個(gè)類別:包含選擇符、子選擇符、相鄰選擇符、兄弟選擇符。接下來為大家一一介紹。在這里特別的說明一下,我們平常中最常用的的是包含選擇符,為什么我們都習(xí)慣用這個(gè)呢?因?yàn)樵贗E6瀏覽器中,只支持包含選擇符,其他的均不支持。在以往(現(xiàn)在有點(diǎn)改觀了)IE6是瀏覽器市場(chǎng)的主角,用戶覆蓋率極高,所以對(duì)于那些IE6所不支持的,也必然造成我們很少用到甚至根本不用的現(xiàn)象。但是記得在一篇文章看到,現(xiàn)在HTML5/CSS3是未來的一個(gè)趨勢(shì),而HTML5/CSS3將會(huì)重視起以前那些被我們誤認(rèn)為沒有什么用的標(biāo)簽的運(yùn)用。也許在某一天,IE6真正的功成身退了,不再折騰考驗(yàn)我們了,那些我們誤以為沒有用的標(biāo)簽語法將會(huì)掀起一次CSS效率大革命。哈哈,純屬個(gè)人幻想。請(qǐng)勿當(dāng)成珍珠一樣真。
包含選擇符(E F)
語法:
E F{ sRules }
說明:
選擇所有被E元素包含的F元素。
示例:
輸出結(jié)果圖片:
輸出結(jié)果說明:ul li表示在ul下面所有的li都會(huì)有作用,只要是屬于ul的li都會(huì)起作用。
子選擇符(E>F)
語法:
E>F{ sRules }
說明:
選擇所有作為E元素的子元素F。
示例:
輸出結(jié)果圖片:
輸出結(jié)果說明: .test>li>a 表示對(duì)在選擇器test下面的 li 標(biāo)簽下面 a 標(biāo)簽起作用。只有屬于這個(gè)關(guān)系的才會(huì)起作用,大家可以從上面的例子看到,有些 li 元素的下面還有 ul li 的選擇符,但是卻不會(huì)起到作用。由此可見,子選擇符比包含選擇符提供了更精細(xì)的控制。結(jié)合上面的兩個(gè)例子我們也可以得出:包含選擇符的深度和廣度超過子對(duì)象選擇符;而子對(duì)象選擇符的針對(duì)性和唯一性比包含選擇符強(qiáng)。這也就是包含選擇符和子選擇符的區(qū)別,這是一個(gè)比較容易混淆的地方。
相鄰選擇符(E+F)
語法:
E+F{ sRules }
說明:
選擇緊貼在E元素之后F元素。
示例:
輸出結(jié)果圖片:
輸出結(jié)果說明: p+p 表示只有在 p元素之后緊連接著另一個(gè)p元素,才會(huì)對(duì)第二個(gè)p元素開始起到作用。也就是只有在結(jié)構(gòu)中的后面兩個(gè)p元素起到作用,而假如在 結(jié)構(gòu)中,卻不會(huì)對(duì)任何標(biāo)簽取到作用,因?yàn)閜標(biāo)簽沒有形成兩個(gè)以上(包括兩個(gè))的連續(xù)。
兄弟選擇符(E~F)
語法:
E~F{ sRules }
說明:
選擇E元素后面的所有兄弟元素F。
輸出結(jié)果圖片:
輸出結(jié)果說明: p~p 表示只要出現(xiàn)第一個(gè)p元素之后,接下來只要有p元素都會(huì)起到作用的(也就是在一個(gè)結(jié)構(gòu)中,第二次出現(xiàn)p元素就會(huì)起到作用)。假如選擇符設(shè)置成 p~p~p 那么同理,會(huì)在第三個(gè)(包含第三個(gè))p元素開始簽到作用。
注:建議大家可以對(duì)以上的示例隨意的更改里面的樣式選擇符,然后去測(cè)試看看輸出的結(jié)果。只有自己動(dòng)手去實(shí)驗(yàn)了,才能記的更加的牢固。
通過上面的舉例說明,大家都已經(jīng)了解了各種關(guān)系選擇符的用法。那么我們?cè)谌粘Ｖ?怎么去運(yùn)用這些選擇符呢?那就得看大家的聰明才智了。或許在以后會(huì)寫一些利用這些選擇符來制作的一些效果,和大家一起來研究探討。合理的有效利用,不但可以提高我們的代碼質(zhì)量而且還大大的提高我們的效率。
注:相關(guān)網(wǎng)站建設(shè)技巧閱讀請(qǐng)移步到建站教程頻道。
收藏本文
文章編輯: 365webcall客服系統(tǒng)(www.365webcall.com)
我的評(píng)論
| 登錄賬號(hào)： | 密碼： | 快速注冊(cè) | 找回密碼 |  |
