css.jpg

CSS的語法為:
選取器 { 屬性:設定值;}
這篇就要來介紹選取器(Selector)的種類及應用。
選取器(Selector),也有人稱之為選擇器,不過 Dreamweaver 內稱之為選取器,小魚也跟著 Adobe 如此稱呼。
選取器,顧名思義就是選取您要定義 CSS 的位置。其種類大約分成以下幾種:
  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(群組選取器)
W3C 定義1~5為單純選取器 (Simple selectors),6~9為組合選取器(Combinators)。
Dreameaver則將4~12都歸類於複合選取器

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>

Descendant combinator(後代選取器)

E F,利用空白鍵區隔兩個元素,表示在 E 元素內的 F 元素才會套用。

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 //元素的第一個字母會套用

CSS

p:first-line { color:red;}
p:first-letter { color:green;}

HTML

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

< /div>
< p>
第一個字會套用綠色<br/>
其它的字不會變色
< /p>
< /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>
文章來源出處 :小魚扮貓 - http://www.fishbecat.com/2010/03/css-selector.html
創作者介紹
創作者 英傑銳數位設計 的頭像
英傑銳數位設計

英傑銳網路數位設計

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()