CSS 選擇器、選取器（Selector）種類簡介

http://blog.fishsaut.com/2010/03/css-selector.html

http://blog.mukispace.com/css-selectors/

1. Class selectors（Class選擇器，Dreamweaver稱為類別選擇器，這樣翻譯也對啦）
2. ID selectors（ID選擇器）
3. Type selectors（型態選擇器，Dreamweaver稱為標籤選擇器，因為套用於HTML標籤）
4. Universal selector（通用選擇器）
5. Attribute selectors（屬性選擇器）
6. Descendant combinator（後代選擇器）
7. Child combinator（子選擇器）
8. Adjacent sibling combinator（同層相鄰選擇器）
9. General sibling combinator（同層全體選擇器）
10. Pseudo-classes（偽類選擇器）
11. Pseudo-elements（偽元素選擇器）
12. Groups of selectors（群組選擇器）

Class selectors（Class選擇器）

「.」開頭，名稱可自訂，一張網頁可有多個class屬性值。

CSS

.emText { color:red;}

HTML

<p class="emText">此段會套用紅色</p>

ID selectors（ID選擇器）

「#」開頭，名稱可自訂，一張網頁只能有一個ID屬性值。

CSS

#emText { color:red;}

HTML

<p id="emText">此段會套用紅色</p>

Type selectors（型態選擇器）

設定於HTML的標籤上，網頁上所有的標籤都會套用。

CSS

h1 {color:red;}
p {color:black;}

HTML

<h1> 標題會套用紅色</h1>
<p> 段落會套用黑色</p>

Universal selector（通用選擇器）

使用字元「*」，整張網頁下的所有元素都會套用設定。

CSS

* {color:red;}

HTML

<h1> 標題會套用紅色</h1>
<p> 段落會套用紅色</p>

Attribute selectors（屬性選擇器）

針對有套用特定屬性的標籤做CSS設定。例如：

E[att]   //套用於含att屬性的E標籤（簡易屬性選擇器）
E[att=val]   //套用於att屬性值為val的E標籤（精確屬性選擇器）
E[att~=val]   //套用於att屬性值包含val的E標籤（部份屬性選擇器）


CSS

div {color:black;}
div[title] {color:red;}
div[title=fishbecat] {color:green;}
div[title~=fishbecat] {color:blue;}

HTML

<div> 此區塊會套用黑色</div>
<div title="blog"> 此區塊會套用紅色</div>
<div title="fishbecat"> 此區塊會套用綠色</div>
<div title="fishbecat's blog">此區塊會套用藍色</div>

顧名思義，就是可以針對標籤裡頭的屬性做更進一步的修改。屬性選擇器總共有4種類型，分別為:

• h2[class] //符合所有含 class 的 h2 標籤即可
•  
class：符合所有含 class 的 h2 標籤


XHTML

<style> h2 { color: red; } </style> <h2> 我是紅色</h2> <h2 class="title"> 我是紅色</h2> <h2 class="nav title"> 我是紅色</h2> <h2 class="title-a-b"> 我是紅色<h2> <h2 class="title sidebar"> 我是紅色</h2>

1 2 3 4 5 6 7 8 9 10 11

<style> h2 {   color: red; } </style> <h2>我是紅色</h2> <h2 class="title">我是紅色</h2> <h2 class="nav title">我是紅色</h2> <h2 class="title-a-b">我是紅色<h2> <h2 class="title sidebar">我是紅色</h2>

• h2[class=title] //符合含 class=title 的 h2 標籤
•  
class=title：符合含 class = title 的 h2 標籤

 


XHTML

<style> body { color: black; } h2[class=title] { color: red; } </style> <h2> 我是黑色</h2> <h2 class="title"> 我是紅色</h2> <h2 class="nav title"> 我是黑色</h2> <h2 class="title-a-b"> 我是黑色<h2> <h2 class="title sidebar"> 我是黑色</h2>

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<style> body {   color: black; } h2[class=title] {   color: red; } </style> <h2>我是黑色</h2> <h2 class="title">我是紅色</h2> <h2 class="nav title">我是黑色</h2> <h2 class="title-a-b">我是黑色<h2> <h2 class="title sidebar">我是黑色</h2>



• h2[class~=title] //只要 class 裡頭有包含 title 文字的 h2 標籤即可
•  
class~=title：只要 class 裡頭有包含 title 文字的 h2 標籤即可

 


XHTML

<style> body { color: black; } h2[class~=title] { color: red; } </style> <h2> 我是黑色</h2> <h2 class="title"> 我是紅色</h2> <h2 class="nav title"> 我是紅色</h2> <h2 class="title-a-b"> 我是黑色<h2> <h2 class="title sidebar"> 我是紅色</h2>

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<style> body {   color: black; } h2[class~=title] {   color: red; } </style> <h2>我是黑色</h2> <h2 class="title">我是紅色</h2> <h2 class="nav title">我是紅色</h2> <h2 class="title-a-b">我是黑色<h2> <h2 class="title sidebar">我是紅色</h2>



• h2[class|=title] //class 的開始值必須為 title 的 h2 標籤
•  
class|=title：class 的開始值必須為 title 的 h2 標籤


XHTML

<style> body { color: black; } h2[class|=title] { color: red; } </style> <h2> 我是黑色</h2> <h2 class="title"> 我是紅色</h2> <h2 class="nav title"> 我是黑色</h2> <h2 class="title-a-b"> 我是紅色<h2> <h2 class="title sidebar"> 我是紅色</h2>

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<style> body {   color: black; } h2[class|=title] {   color: red; } </style> <h2>我是黑色</h2> <h2 class="title">我是紅色</h2> <h2 class="nav title">我是黑色</h2> <h2 class="title-a-b">我是紅色<h2> <h2 class="title sidebar">我是紅色</h2>

Descendant combinator（後代選擇器）

E F，利用空白鍵區隔兩個元素，表示在 E 元素內的 F 元素才會套用。(中間相隔有別的tag也可以)


CSS

a { color:black;}
h1 a { color:red;}
#wrapper a { color:green;}

HTML

<a> 只設定a標籤會套用黑色</a>

<h1>
<a>在h1裡的a標籤會套用紅色</a>
</h1>

<div id="wrapper">
<a>在ID=wrapper裡的a標籤會套用綠色</a>
</div>

Child combinator（子選擇器）

E > F，利用>區隔兩個元素，表示在有父子關係的元素才會套用。與後代不同的是 E 及 F 元素之間不能再插入其它的元素，否則就不是父子關係了。

CSS

#wrapper > p{ color:red;}
#wrapper p { color:black;}

HTML

<div id="wrapper">
<p>在id=wrapper區塊裡的段落會套用紅色</p>
</div>

<div id="wrapper">
<span>
<p>中間多了span就只會套用黑色</p>
</span>
</div>

Adjacent sibling combinator（同層相鄰選擇器）

E + F，利用+區隔兩個元素，表示在與 E 同一層關係的相鄰 F 元素才會套用。

CSS

h1 { color:red;}
h1 + p { color:green;}

HTML

<h1>標題1會套用紅色</h1>
<p>跟h1相鄰的p會套用綠色</p>
<p>沒有跟h1相鄰的p會套用預設值</p>

General sibling combinator（同層全體選擇器）

E ~ F，利用~區隔兩個元素，表示在與 E 同一層關係的 F 元素全部都會套用。
不過這是CSS 3的選擇器。目前並沒有所有瀏覽器都支援，Dreamweaver CS4也沒支援。

CSS

h1 { color:red;}
h1 ~ p { color:green;} 

HTML

<h1>標題1會套用紅色</h1>
<p>h1接下來p都會套用綠色</p>
<p>h1接下來p都會套用綠色</p>

Pseudo-classes（偽類選擇器）

這個名詞可能許多人都覺得陌生，但提到a:link、a:visited、a:hover、a:active應該就很熟悉了吧！

:link   //連結平常的樣式
:visited   //連結查閱後的樣式
:hover   //滑鼠滑入的樣式
:active   //滑鼠按下的樣式
:focus   //目標為焦點的樣式
:lang(E)   //當語言為E的樣式
:first-child   //第一個元素的樣式

CSS

p:first-child { color:red;}
p:lang(zh-TW) { color:green;}

HTML

<div>
<p>第一個 p 會套用紅色</p>
<p>其它的 p 不會變色</p>
</div>

<div>
<p lang="zh-TW">語言為 zh-TW 會套用綠色</p>
<p lang="en">語言為 en 不會變色</p>
</div>

Pseudo-elements（偽元素選擇器）

其實偽元素選擇器蠻多的，小魚就只先介紹 :first-line、:first-letter 這兩個元老級的偽元素。

:first-line   //元素的第一行會套用
:first-letter   //元素的第一個字母會套用
:after   //在元素後加上內容（一般會配 content 屬性）
:before   //在元素前加上內容（一般會配 content 屬性）

CSS

p:first-line { color:red;}
p:first-letter { color:green;}
.price:before { content:"NT$";}
.price:after { content:"元整";}

HTML

<div>
<p>
第一行會套用紅色<br/>
第二行以後不會變色
</p>
</div>

<div>
<p>
第一個字會套用綠色<br/>
其它的字不會變色
</p>
</div>

<div>
數字前加上"NT$"，數字後加上"元整"：<span class="price"> 1000 </span>
</div>

Groups of selectors（群組選擇器）

您還可以用「,」逗點區隔，同時對多個選擇器定義樣式。 
E, F, G，同時針對E、F、G元素設定樣式。

CSS

h1, h2, p {color:red;}

HTML

<h1>群組內的元素都套用紅色</h1>
<h2>群組內的元素都套用紅色</h2>
<p>群組內的元素都套用紅色</p>
<a>群組沒定義的元素不會變色</a>