選擇器(75%)

風痕影/上次修改於 2007-08-14

選擇器(selector),俗稱「標籤」(但不要和HTML標籤弄混),或譯「挑選者」、「選擇符」。它是用來讓瀏覽器知道,這條樣式是針對誰來設定的。是針對文字、圖片,還是超連結呢?

常見的選擇器

你常常搞不清楚a、#a、.a的分別嗎?以下三種是最常見的選擇器:

類型(Type)選擇器

類型選擇器 其實就是以某個(X)HTML元素的名稱作為選擇器,而樣式則是套用在那個元素上。例如:你要把超連結<a>的樣式變成黃色,只要寫a{color: yellow;}就可以了,前面的「a」就是「類型選擇器」。

ID選擇器

ID選擇器的寫法是在開頭寫上井字號(#),而受到控制的(X)HTML元素本身則需要設定id屬性。例如:你要把id="a">的樣式變成黃色,只要寫#a{color: yellow;}就可以了,前面的「#a」就是「ID選擇器」。

有一點要注意,一個頁面上不可以有多個(X)HTML元素同時使用相同的ID。

類別(Class)選擇器

屬性選擇器的一種。

類別選擇器的寫法是在開頭寫上句點(.),而受到控制的(X)HTML元素本身則需要設定class屬性。例如:你要把class="a">的樣式變成黃色,只要寫.a{color: yellow;}就可以了,前面的「.a」就是「class選擇器」。

接著,再來說說其他常見的選擇器:

後代(Descendant)選擇器

(X)HTML的結構用族譜來解釋是最容易的了。

在(X)HTML中,被甲元素所包住的元素,就是甲元素的「子元素」(child elements),就像你的父母親抱著你(孩子)一樣。而後代選擇器指就是這些子元素,再加上孫元素、曾孫元素等全部的後代。

後代選擇器的寫法很簡單,只要在元素本身和後代之間加個空白就可以了。比如說你是#me,我們現在定義你所有的後代,只要叫做的,全都變成黃色,那只要寫#me a{color: yellow;}就可以了;#me和a中間的「空白」就是「後代選擇器」

這時,無論你和那個後代之間隔了多少代,他一樣都會繼承你所設定的樣式,變成黃色(真可怕)。

因此,假設有個(X)HTML結構如下,則所有的超連結都會變成黃色:

  1. #me(我)
    1. A(超連結甲,兒子)
    2. P(段落甲,兒子)
      1. P(段落乙,孫子)
        1. A(超連結乙,曾孫)
      2. A(超連結丙,孫子)
超連結樣式設定  連結偽類(Link Pseudo-Class)

這兩種選擇器只能用在超連結的變化上。

沒拜訪過的超連結,通常瀏覽器預設顯示為藍色
拜訪過的超連結,通常瀏覽器預設顯示為紫色
動態偽類(Dynamic Pseudo-Class)

這些選擇器用在其他元素上也行,只是IE不支援。

當滑鼠游標在元素上時 在IE裡無法用在以外的標籤上
當元素被按下時 在IE裡無法用在以外的標籤上
當元素取得焦點 IE不支援

什麼是取得焦點呢?常見於兩種情況:

  • 按下超連結後,如果沒點其他地方,則它外面會一直有個虛線框
  • 被點下的表單元件,內部會出現游標,可以開始輸入文字
少見的選擇器   子選擇器

IE從第七版開始支援。寫成「大於」(>)。和後代選擇器很像,但必須是直接的父子關係才能繼承樣式。比如說,有個(X)HTML結構是這樣好了:

  1. BODY(我)
    1. A(超連結甲,兒子)
    2. P(段落甲,兒子)
      1. P(段落乙,孫子)
        1. A(超連結乙,曾孫)
      2. A(超連結丙,孫子)

這時,你一旦寫了body>a{color: red;},則只有「超連結甲」會變成紅色,因為只有它是的「兒子」。但如果你寫了body a{color: red;},則無論中間是否隔了段落甲、段落乙,三個超連結全都會變成紅色,它們都是的後代。

偽類(Pseudo-Class)

除了上面所說最常見的五種外,還有其他偽類:

:first-child

IE 7才開始支援這個選擇器。

某元素的父元素的第一個子元素,簡單的說就是家裡和自己同輩的長子。就拿上面的例子來說,假設裡頭有很多個叫做的兒子,則只有第一個會套用body>a:first-child所指定的樣式。

當然,如果你是獨生子/女,那這個選擇器指的就是你自己。

:lang(ISO語言代碼)

IE不支援這個選擇器。

當(X)HTML元素有設定lang屬性來指定元素內的文字語言時,就可以用這個選擇器來做設定。正體中文的寫法是:lang(zh-tw),英文是:lang(en),其他請看這裡(HTML單元的附錄)。

偽元素(Pseudo-Element)
元素中的第一個字,可以用此來造出雜誌般首字放大的效果 IE 5開始支援
元素中的第一行 IE 5開始支援
在元素的內文前面插入文字 IE不支援,Fx 1.5開始支援
在元素的內文後面插入文字 IE不支援,Fx 1.5開始支援

表格中最後兩個選擇器需配合content特性來用,例如用body:before{content: "123";}則會在網頁開頭加上「123」這三個字,但IE不支援,而Fx則由1.5版開始支援。


 

通用(Universal)選擇器

寫做加號(+),指兩個元素相鄰,且有共同父親,例如:

  1. BODY
    1. P(段落甲)
    2. A(超連結甲)
    3. P (段落乙)
      1. A(超連結乙)

其中段落甲與超連結甲相鄰,超連結甲與段落乙相鄰,但段落乙與超連結乙、段落甲並不相鄰。IE不支援。

屬性(Attribute)選擇器

除了class以外,其實W3C還制定了其他屬性選擇器(尚未寫好)。

princess941 發表在 痞客邦 PIXNET 留言(0) 人氣()