CSS樣式表：詳細介紹IE7新支援的選取器

css|樣式表

現在IE7已經推出一段時間並且滲透到使用者當中，不用等太久我們就可以在頁面上使用更進階的CSS。兩個最有用的項目將是 Child子和Adjacent Sibling相鄰兄弟選擇符。現在已是時候使用它們製作網頁，並且更深入研究它們。

注意，選取器包括現行的符號，“>”,“+”和空格（後代選擇符），涉及到子選取器，相鄰兄弟選取器，後代選取器，統稱為選擇符。

一個較好的方法

在我們研究選擇符之前，弄清楚他們的不同和為什麼它們是好東西的原因是個不錯的主意。原因很簡單，它減少網頁的“class-itis”弊病。主要原因就是“class-itis”在目前網頁中非常普遍，直到現在，我們擁有了為建立配合CSS選取器而存在而且支援完美的後代選擇符，即兩個選取器之間空格。

當使用後代選擇符，右邊的一個元素選取器是被選擇的，不管左邊的元素選取器標籤有幾個。舉例，p a{color:red;}，意思是段落裡面的所有連結都是紅色。這非常有用，也是一類相當廣泛的選擇組合。

代表性的class-itis的級數像下面一樣。首先，你使用一個非常好的乾淨的html結構運用簡單的CSS樣式構建標題、段落等等。然後有人告訴你每個div塊第一段裡文本顏色需要紅色。你不能僅改變目標段落的樣式，因為那可能影響全部，所以你被迫命名一個特殊class應用在第一段。

於是數十次相同的要求在後面繼續，結果就形成了class-itis現象。為什麼說這樣是糟糕有害的？因為這和font標籤比起來沒什麼區別。當然，classes允許無窮的花樣，但是緊隨其後就是無窮的混亂，或可能更快勝於隨後。

舉個例子，假設你已經給所有第一段加上class屬性，而且一切都好。現在你被告知，首兩段需要樣式，不僅是第一個。為使用正確class完成目的，你必須確信第二段的每個都有專用的class。最後，這樣的習慣導致原始碼裡到處都是class，感覺像新舊兩個樣式在打鬥衝突，讓人頭痛。

如果我們只針對CSS講這樣未必不好，實際上“運用下列樣式到每個div塊第一段和第二段裡面。”這樣的情況發生了，最新的CSS選擇符允許我們耍點小聰明就可辦到。

回顧複習下

讓我們複習一些術語。W3C CSS2.1 規範解釋了選取器（selectors）和選擇（combinators）：

“一個選取器是用選擇符串連起來的一個或更多的選取器。選擇符包括：空格，‘>’和‘+’。空格可能出現在一個選擇符和簡單的選取器之間。”一個簡單的選取器可以是一種類型選取器或是通用選取器跟隨零或者更多屬性選取器，ID選取器或者偽類，在任何順序。

第一個支援的選擇符（也經常被稱作選取器，這是唯一正確的部分）是子選擇符。在簡單的選取器之間指定“>”符號。一個簡單的例子，#leftcol>p{color:blue;}，意思是#leftcol下面所有子段落文本顏色是藍色。

但是如果#leftcol有一個DIV，而且DIV還有一個段落，#left>p選取器不會使這個段落裡的文本變成藍色，因為子選擇符，不像頻繁使用的後代選擇符，只選擇直接的孩子，不是“>”符號的左邊元素任何深度的嵌套後代。

另外一個新支援的選擇符將是相鄰選擇符，使用"+"符號。子選擇符可以指向另外一個元素的子部，相鄰選擇符可以指向跟隨的元素，但與前面的元素獨立。例子，h2+p {color:blue;}，跟隨h2元素後面段落的文本顏色為藍色。

現在你明白選擇符怎麼工作，我們開始研究複雜聯合元素，看看我們能不能不使用class達到目的。

作者：John Gallant , Holly Bergevin 翻譯：w3cpro.cn

原文地址：http://www.communitymx.com/content/article.cfm?cid=1C603

翻譯地址：http://www.w3cpro.cn/article/xhtmlcss/124.html