|
作者：John Gallant , Holly Bergevin 翻譯：w3cpro.cn
原文地址：http://www.communitymx.com/content/article.cfm?cid=1C603
翻譯地址：http://www.w3cpro.cn/article/xhtmlcss/124.html
現(xiàn)在IE7已經(jīng)推出一段時(shí)間并且滲透到用戶當(dāng)中，不用等太久我們就可以在頁面上使用更高級的CSS。兩個(gè)最有用的項(xiàng)目將是 Child子和Adjacent Sibling相鄰兄弟選擇符�，F(xiàn)在已是時(shí)候使用它們制作網(wǎng)頁，并且更深入研究它們。
注意，選擇器包括現(xiàn)行的符號(hào)，“>”,“+”和空格（后代選擇符），涉及到子選擇器，相鄰兄弟選擇器，后代選擇器，統(tǒng)稱為選擇符。
一個(gè)較好的方法
在我們研究選擇符之前，弄清楚他們的不同和為什么它們是好東西的原因是個(gè)不錯(cuò)的主意。原因很簡單，它減少網(wǎng)頁的“class-itis”弊病。主要原因就是“class-itis”在目前網(wǎng)頁中非常普遍，直到現(xiàn)在，我們擁有了為建立配合CSS選擇器而存在而且支持完美的后代選擇符，即兩個(gè)選擇器之間空格。
當(dāng)使用后代選擇符，右邊的一個(gè)元素選擇器是被選擇的，不管左邊的元素選擇器標(biāo)簽有幾個(gè)。舉例，p a{color:red;}，意思是段落里面的所有鏈接都是紅色。這非常有用，也是一類相當(dāng)廣泛的選擇組合。
代表性的class-itis的級數(shù)像下面一樣。首先，你使用一個(gè)非常好的干凈的html結(jié)構(gòu)運(yùn)用簡單的CSS樣式構(gòu)建標(biāo)題、段落等等。然后有人告訴你每個(gè)div塊第一段里文本顏色需要紅色。你不能僅改變目標(biāo)段落的樣式，因?yàn)槟强赡苡绊懭浚阅惚黄让粋�(gè)特殊class應(yīng)用在第一段。
于是數(shù)十次相同的要求在后面繼續(xù)，結(jié)果就形成了class-itis現(xiàn)象。為什么說這樣是糟糕有害的？因?yàn)檫@和font標(biāo)簽比起來沒什么區(qū)別。當(dāng)然，classes允許無窮的花樣，但是緊隨其后就是無窮的混亂，或可能更快勝于隨后。
舉個(gè)例子，假設(shè)你已經(jīng)給所有第一段加上class屬性，而且一切都好。現(xiàn)在你被告知，首兩段需要樣式，不僅是第一個(gè)。為使用正確class完成目的，你必須確信第二段的每個(gè)都有專用的class。最后，這樣的習(xí)慣導(dǎo)致源代碼里到處都是class，感覺像新舊兩個(gè)樣式在打斗沖突，讓人頭痛。
如果我們只針對CSS講這樣未必不好，實(shí)際上“運(yùn)用下列樣式到每個(gè)div塊第一段和第二段里面�！边@樣的情況發(fā)生了，最新的CSS選擇符允許我們耍點(diǎn)小聰明就可辦到。
回顧復(fù)習(xí)下
讓我們復(fù)習(xí)一些術(shù)語。W3C CSS2.1 規(guī)范解釋了選擇器（selectors）和選擇（combinators）：
“一個(gè)選擇器是用選擇符連接起來的一個(gè)或更多的選擇器。選擇符包括：空格，‘>’和‘+’�？崭窨赡艹霈F(xiàn)在一個(gè)選擇符和簡單的選擇器之間�！币粋�(gè)簡單的選擇器可以是一種類型選擇器或是通用選擇器跟隨零或者更多屬性選擇器，ID選擇器或者偽類，在任何順序。
第一個(gè)支持的選擇符（也經(jīng)常被稱作選擇器，這是唯一正確的部分）是子選擇符。在簡單的選擇器之間指定“>”符號(hào)。一個(gè)簡單的例子，#leftcol>p{color:blue;}，意思是#leftcol下面所有子段落文本顏色是藍(lán)色。
但是如果#leftcol有一個(gè)DIV，而且DIV還有一個(gè)段落，#left>p選擇器不會(huì)使這個(gè)段落里的文本變成藍(lán)色，因?yàn)樽舆x擇符，不像頻繁使用的后代選擇符，只選擇直接的孩子，不是“>”符號(hào)的左邊元素任何深度的嵌套后代。
另外一個(gè)新支持的選擇符將是相鄰選擇符，使用"+"符號(hào)。子選擇符可以指向另外一個(gè)元素的子部，相鄰選擇符可以指向跟隨的元素，但與前面的元素獨(dú)立。例子，h2+p {color:blue;}，跟隨h2元素后面段落的文本顏色為藍(lán)色。
現(xiàn)在你明白選擇符怎么工作，我們開始研究復(fù)雜聯(lián)合元素，看看我們能不能不使用class達(dá)到目的。
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁 下一頁 詳細(xì)介紹IE7新支持的選擇器 [2]
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 詳細(xì)介紹IE7新支持的選擇器 [1]
第 2 頁 
