IE7新支持的CSS選擇器有哪些?_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
現在IE7已經推出一段時間并且滲透到用戶當中,不用等太久我們就可以在頁面上使用更高級的CSS。兩個最有用的項目將是Child子和Adjacent Sibling相鄰兄弟選擇符,F在已是時候使用它們制作網頁,并且更深入研究它們。
注重,選擇器包括現行的符號,“>”,“ ”和空格(后代選擇符),涉及到子選擇器,相鄰兄弟選擇器,后代選擇器,統稱為選擇符。
在我們研究選擇符之前,弄清楚他們的不同和為什么它們是好東西的原因是個不錯的主意。原因很簡單,它減少網頁的“class-itis”弊病。主要原因就是“class-itis”在目前網頁中非常普遍,直到現在,我們擁有了為建立配合CSS選擇器而存在而且支持完美的后代選擇符,即兩個選擇器之間空格。
當使用后代選擇符,右邊的一個元素選擇器是被選擇的,不管左邊的元素選擇器標簽有幾個。舉例,p a{color:red;},意思是段落里面的所有鏈接都是紅色。這非常有用,也是一類相當廣泛的選擇組合。
代表性的class-itis的級數像下面一樣。首先,你使用一個非常好的干凈的html結構運用簡單的CSS樣式構建標題、段落等等。然后有人告訴你每個div塊第一段里文本顏色需要紅色。你不能僅改變目標段落的樣式,因為那可能影響全部,所以你被迫命名一個非凡class應用在第一段。
于是數十次相同的要求在后面繼續,結果就形成了class-itis現象。為什么說這樣是糟糕有害的?因為這和font標簽比起來沒什么區別。當然,classes答應無窮的花樣,但是緊隨其后就是無窮的混亂,或可能更快勝于隨后。
舉個例子,假設你已經給所有第一段加上class屬性,而且一切都好,F在你被告知,首兩段需要樣式,不僅是第一個。為使用正確class完成目的,你必須確信第二段的每個都有專用的class。最后,這樣的習慣導致源代碼里到處都是class,感覺像新舊兩個樣式在打斗沖突,讓人頭痛。
假如我們只針對CSS講這樣未必不好,實際上“運用下列樣式到每個div塊第一段和第二段里面!边@樣的情況發生了,最新的CSS選擇符答應我們耍點小聰明就可辦到。
讓我們復習一些術語。W3C CSS2.1 規范解釋了選擇器(selectors)和選擇(combinators):
“一個選擇器是用選擇符連接起來的一個或更多的選擇器。選擇符包括:空格,‘>’和‘ ’?崭窨赡艹霈F在一個選擇符和簡單的選擇器之間!币粋簡單的選擇器可以是一種類型選擇器或是通用選擇器跟隨零或者更多屬性選擇器,ID選擇器或者偽類,在任何順序。
第一個支持的選擇符(也經常被稱作選擇器,這是唯一正確的部分)是子選擇符。在簡單的選擇器之間指定“>”符號。一個簡單的例子,#leftcol>p{color:blue;},意思是#leftcol下面所有子段落文本顏色是藍色。
但是假如#leftcol有一個DIV,而且DIV還有一個段落,#left>p選擇器不會使這個段落里的文本變成藍色,因為子選擇符,不像頻繁使用的后代選擇符,只選擇直接的孩子,不是“>”符號的左邊元素任何深度的嵌套后代。
另外一個新支持的選擇符將是相鄰選擇符,使用" "符號。子選擇符可以指向另外一個元素的子部,相鄰選擇符可以指向跟隨的元素,但與前面的元素獨立。例子,h2 p {color:blue;},跟隨h2元素后面段落的文本顏色為藍色。
現在你明白選擇符怎么工作,我們可以應用復雜聯合元素,看看我們能不能不使用class達到目的。
相關Div+CSS教程:
- 相關鏈接:
- 教程說明:
Div+CSS教程-IE7新支持的CSS選擇器有哪些?
。