選擇器(75%)
風痕影/上次修改於 2007-08-14
選擇器(selector),俗稱「標籤」(但不要和HTML標籤弄混),或譯「挑選者」、「選擇符」。它是用來讓瀏覽器知道,這條樣式是針對誰來設定的。是針對文字、圖片,還是超連結呢?
常見的選擇器你常常搞不清楚a、#a、.a的分別嗎?以下三種是最常見的選擇器:
類型(Type)選擇器類型選擇器 其實就是以某個(X)HTML元素的名稱作為選擇器,而樣式則是套用在那個元素上。例如:你要把超連結<a>
的樣式變成黃色,只要寫a{color: yellow;}
就可以了,前面的「a」就是「類型選擇器」。
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結構如下,則所有的超連結都會變成黃色:
- #me(我)
- A(超連結甲,兒子)
- P(段落甲,兒子)
- P(段落乙,孫子)
- A(超連結乙,曾孫)
- A(超連結丙,孫子)
- P(段落乙,孫子)
這兩種選擇器只能用在超連結的變化上。
沒拜訪過的超連結,通常瀏覽器預設顯示為藍色 |
拜訪過的超連結,通常瀏覽器預設顯示為紫色 |
這些選擇器用在其他元素上也行,只是IE不支援。
當滑鼠游標在元素上時 | 在IE裡無法用在 以外的標籤上 |
當元素被按下時 | 在IE裡無法用在 以外的標籤上 |
當元素取得焦點時 | IE不支援 |
什麼是取得焦點呢?常見於兩種情況:
- 按下超連結後,如果沒點其他地方,則它外面會一直有個虛線框
- 被點下的表單元件,內部會出現游標,可以開始輸入文字
IE從第七版開始支援。寫成「大於」(>)。和後代選擇器很像,但必須是直接的父子關係才能繼承樣式。比如說,有個(X)HTML結構是這樣好了:
- BODY(我)
- A(超連結甲,兒子)
- P(段落甲,兒子)
- P(段落乙,孫子)
- A(超連結乙,曾孫)
- A(超連結丙,孫子)
- P(段落乙,孫子)
這時,你一旦寫了body>a{color: red;}
,則只有「超連結甲」會變成紅色,因為只有它是的「兒子」。但如果你寫了
body a{color: red;}
,則無論中間是否隔了段落甲、段落乙,三個超連結全都會變成紅色,它們都是的後代。
除了上面所說最常見的五種外,還有其他偽類:
:first-childIE 7才開始支援這個選擇器。
某元素的父元素的第一個子元素,簡單的說就是家裡和自己同輩的長子。就拿上面的例子來說,假設裡頭有很多個叫做
的兒子,則只有第一個會套用
body>a:first-child
所指定的樣式。
當然,如果你是獨生子/女,那這個選擇器指的就是你自己。
:lang(ISO語言代碼)IE不支援這個選擇器。
當(X)HTML元素有設定lang屬性來指定元素內的文字語言時,就可以用這個選擇器來做設定。正體中文的寫法是:lang(zh-tw)
,英文是:lang(en)
,其他請看這裡(HTML單元的附錄)。
元素中的第一個字,可以用此來造出雜誌般首字放大的效果 | IE 5開始支援 |
元素中的第一行 | IE 5開始支援 |
在元素的內文前面插入文字 | IE不支援,Fx 1.5開始支援 |
在元素的內文後面插入文字 | IE不支援,Fx 1.5開始支援 |
表格中最後兩個選擇器需配合content特性來用,例如用body:before{content: "123";}
則會在網頁開頭加上「123」這三個字,但IE不支援,而Fx則由1.5版開始支援。
通用(Universal)選擇器
寫做加號(+),指兩個元素相鄰,且有共同父親,例如:
- BODY
- P(段落甲)
- A(超連結甲)
- P (段落乙)
- A(超連結乙)
其中段落甲與超連結甲相鄰,超連結甲與段落乙相鄰,但段落乙與超連結乙、段落甲並不相鄰。IE不支援。
屬性(Attribute)選擇器除了class以外,其實W3C還制定了其他屬性選擇器(尚未寫好)。
留言列表