css多類選擇器

HTML文檔是一棵樹的結構，各元素以一種層次結構爲基礎構成‘樹’的視圖。文檔樹中的每一個元素，要麼是另外一個元素的父元素，要麼是另外一個元素的子元素，這樣，各元素之間就造成了‘父子關係’。基於這樣的關係模型，CSS定義了後代選擇器（descendant selector）也稱爲上下文選擇器（contextual selector）。

後代選擇器的寫法爲，子代元素以空格與父元素造成鏈接關係構成選擇器，如：

div span{color:blue;}

 

以上規則的結果爲：「做爲div元素後代的任何span元素顯示爲藍色字體」。

選擇器之間的空格是一種結合符（combinator）。每一個空格結合符能夠解釋爲「...在...中找到」、「...做爲...的一部分」、「...做爲...的後代」，可是要求必須從右向左讀選擇器——《CSS權威指南》第三版

CSS還有兩種選擇器：類選擇器和ID選擇器，箇中細則不是本文陳述的重點。本文的重點是：空格在後代選擇器、類選擇器和ID選擇器相結合的狀況中的種種問題，及解決方式。

先看看如下的規則：

div.blue {color:blue;}

以上規則的結果爲：「全部class屬性值爲blue的div元素顯示爲藍色字體」。然而個人要求並非這樣，個人要求是：「做爲div元素後代的任何class屬性值爲blue的元素顯示爲藍色字體」。試試如下的規則：

div .blue{color:blue;}

以上規則的改進之處爲'div'與'.blue'之間多了一個空格，這樣是否就能造成後代選擇器呢？答案是否認的！該規則實現的結果依舊是：「全部class屬性值爲blue的div元素顯示爲藍色字體」。

那麼該怎麼結合類選擇器構成後代選擇器的效果呢？方法是有的，那就是給父元素div設置一個class或者id屬性，假設我給它加上一個class屬性，因而規則就變爲：

div.contain .blue{color:blue;}

以上規則的結果爲：「全部class屬性值爲contain的div元素，其後代中class屬性值爲blue的任何元素顯示爲藍色字體」。結果雖然不能徹底達到個人苛刻要求，但已經很接近了。接近了，效果必定是很明顯的，然而我卻發現徹底沒有了藍色字體，由於我把規則寫爲：

div.contain.blue{color:blue;}

以上規則的不一樣之處在於，'.contain'與'.blue'之間少了一個空格！少了空格，以上選擇器就不是後代選擇器了，而是另一種選擇器：「多類選擇器」。

在HTML中，一個class值中有可能包含一個詞列表，各個詞之間用空格分隔。那麼以上的多類選擇器只能將規則應用於以下形式的元素中：

<div class="contain blue">text</div>

以上的class屬性值少了其中一個都沒法將字體顯示爲藍色！ 

將以上規則放在一塊兒，比較起來會清晰一點：

1 div.contain .blue{color:blue;}
2 div.contain.blue{color:blue;} 

以上兩種規則分別應用的元素以下：

1 <div class="contain">contain<span class="blue">blue</span><!--後代-->
2 <div class="contain blue">contain and blue</div><!--多類-->

值得注意的是：ID屬性不容許有以空格分隔的詞列表。因此如下的規則將沒法應用到任何元素：

div#contain#blue{color:blue;}

以上的規則將沒法應用到任何元素。你只能乖乖地用空格將兩個ID選擇器分隔，構成後代選擇器。

 

綜上，選擇器之間的空格是一種結合符，若是要構成後代選擇器，則空格兩邊的選擇符必須爲以下兩種形式：

1. 元素選擇符 空格 元素選擇符

2. 非元素選擇符 空格 非元素選擇符 

後代選擇器中絕對不可能出現的一種情形：元素選擇符 [空格] 非元素選擇符。

最重要一點：兩個類選擇器之間存在空格則構成後代選擇器，之間沒有空格的則構成多類選擇器。

不加空格表示同時包含這些選擇器的元素