CSS選擇器中的空格的不同作用

2021-06-22 18:51:07 字數 2012 閱讀 7957

css的規則裡總有不同的關係,乙個空格也有不同的用法,不同的地方用空格可以有不同的效果,這就值得很多朋友們注意了,不要因為乙個小小的空格到時連錯在**都沒發現......

html文件是一棵樹的結構,各元素以一種層次結構為基礎構成『樹』的檢視。文件樹中的每個元素,要麼是另乙個元素的父元素,要麼是另乙個元素的子元素,這樣,各元素之間就形成了『父子關係』。基於這樣的關係模型,css定義了後代選擇器(descendant selector)也稱為上下文選擇器(contextual selector)。

後代選擇器的寫法為,子代元素以空格與父元素形成連線關係構成選擇器,如:

div span

以上規則的結果為:「作為div元素後代的任何span元素顯示為藍色字型」。

選擇器之間的空格是一種結合符(combinator)。每個空格結合符可以解釋為「...在...中找到」、「...作為...的一部分」、「...作為...的後代」,但是要求必須從右向左讀選擇器——《css權威指南》第三版

css還有兩種選擇器:類選擇器和id選擇器,個中細則不是本文陳述的重點。本文的重點是:空格在後代選擇器、類選擇器和id選擇器相結合的情況中的種種問題,及解決方式。

先看看以下的規則:

div.blue 

以上規則的結果為:「所有class屬性值為blue的div元素顯示為藍色字型」。然而我的要求並不是這樣,我的要求是:「作為div元素後代的任何class屬性值為blue的元素顯示為藍色字型」。試試以下的規則:

div .blue

以上規則的結果為:「所有class屬性值為contain的div元素,其後代中class屬性值為blue的任何元素顯示為藍色字型」。結果雖然不能完全達到我的苛刻要求,但已經很接近了。接近了,效果一定是很明顯的,然而我卻發現完全沒有了藍色字型,因為我把規則寫為:

div.contain.blue

以上規則的不同之處在於,'.contain'與'.blue'之間少了乙個空格!少了空格,以上選擇器就不是後代選擇器了,而是另外一種選擇器:「多類選擇器」。

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

<

div 

class

="contain blue"

>

text

div>

以上的class屬性值少了其中乙個都無法將字型顯示為藍色! 

將以上規則放在一起,比較起來會清晰一點:

1div.contain .blue

/*後代選擇器*/2

div.contain.blue

/*多類選擇器*/

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

1<

div 

class

="contain"

>

contain

<

span 

class

="blue"

>

blue

span

> 2

<

div 

class

="contain blue"

>

contain and blue

div>

值得注意的是:id屬性不允許有以空格分隔的詞列表。所以以下的規則將無法應用到任何元素:

div#contain#blue

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

綜上,選擇器之間的空格是一種結合符,如果要構成後代選擇器,則空格兩邊的選擇符必須為如下兩種形式:

元素選擇符 空格 元素選擇符

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

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

後代選擇器另一種存在的情形是:非元素選擇符 [空格] 元素選擇符。

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

參考資料:《css權威指南:第三版》eric a.meyer著 尹志忠 侯妍譯

CSS選擇器中的空格

div.contain blue div.contain.blue 以上兩種規則分別應用的元素如下 contain blue contain and blue 值得注意的是 id屬性不允許有以空格分隔的詞列表。所以以下的規則將無法應用到任何元素 div contain blue 以上的規則將無法應用...

CSS中的選擇器

1.關係選擇器 a.後代選擇器特點 父元素 子元素,中間是空格什麼都不加 b.兒子選擇器的特點 父元素 子元素,中間是 號 c.相鄰選擇器特點 元素 元素,中間用 號,但是兩者要為同一級才行 d.兄弟選擇器特點 元素 元素,兄弟元素中間用 號,必須要兩個為同一級 2.屬性選擇器 a.格式是標籤名 屬...

Css中的選擇器

常用的選擇器有如下幾種 1 標籤選擇器標籤選擇器,此種選擇器影響範圍大.舉例 div 2 id選擇器 html元素以id屬性來設定id選擇器,css 中 id 選擇器以 來定義。通過id名來選擇元素,元素的id名稱不能重複,所以乙個樣式設定項只能對應於頁面上乙個元素,不能復用,id名一般給程式使用,...