2012年1月9日 星期一

CSS選擇器

CSS選擇器是學習CSS裡蠻重要而且很基礎的觀念,在CSS2定義裡共有十種選擇器,稍微在這邊整理一下。

1.類型選擇器(Type Selector):
就是選擇html的標籤,如:
h1{
color:#ccc;
}

2.類別選擇器(Class Selector):
選擇class="xx"的元素,如:
.xx{
color:#ccc;
}

3.ID選擇器(ID Selector):
選擇ID="xx"的元素,跟class不同的是一個是".",一個是"#",這個初學者很容易搞錯,如:
#xx{
color:#ccc;
}

4.後代選擇器(Descendant Selector)
選擇xx元素裡面的xx元素,只要以空白分隔就可以了,如:
#xx .xx{
color:#ccc;
}
這個就是選擇id=xx裡面的class=xx的元素。

5.子選擇器(Child Selector):
選擇跟上面那層只差一層的元素,用">"表示,如:
#xx>.xx{
color:#ccc;
}
這個會選到id=xx包住的第一層class=xx的元素,如果那個class=xx的元素又被其他元素包住,則不會選擇到。

6.全域選擇器(Universal Selector):
整個網頁都會被選到,使用"*"

7.相鄰選擇器(Adjacent Silbing Selector):
選擇旁邊的選擇器,使用"+",如:
h1+h1{
color:#ccc;
}
選擇第一個h1下面的第二個h1。

8.屬性選擇器(Attribute Selector):
以html標籤下的屬性選擇元素,有以下四種選擇方式:
h1[class] //符合所有含class的h1標籤即可
h1[class=title] //符合含class=title的h1標籤
h1[class~=title] //只要calss裡頭有包含title文字的h1標籤
h1[class|=title] //class的開始值必須為title的h1標籤

9.虛擬類別(Pseudo-Classes):
大家熟悉的a:link、a:visited、a:hover、a:active就是這種。

10.虛擬元素(Pseudo-Elements):
包含first-line(選擇第一行)及:first-letter(選得第一個字母),不過ie不大支援,用的時候要謹慎。

而根據網站效率專家Steve Souders指出,各種css選擇器的效率由高至低排列如下:
1. ID (#)
2. Class (.)
3. 類型選擇器
4. 相鄰選擇器 (+)
5. 子選擇器 (>)
6. 後代選擇器
7. 全域選擇器 (*)
8. 屬性選擇器 ([type="text"])
9. 虛擬類別/元素 (:hover)
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...