CSS Selector 種類簡介

魚戀秋波 Neil Y.K. :

其實學習 網頁樣式表(CSS) 不難，只不過很多時後真的要遇到實際的需求才會發現 CSS 好用的地方，當然很多書本上對於 CSS Selector 的部份其實沒有交代的很清楚，由其是在以前 CSS 書很少的時代，所以魚戀把CSS Selector整理了一下與大家分享。

CSS Selector 又稱為樣式選取器，也就是你希望 CSS 所顯示出來的效果要套用在哪些網頁元件上，有那麼多的網頁元素，要如何簡潔有效的套用上樣式， Selector 的善用功力就是關鍵！

魚戀會設計一些範例，用來解釋 Selector 的用法，網頁元素碼就是寫在 .HTML 檔裡的東東，選取器就是寫在 .CSS 或是在 <style> 標籤裡的東東嚕！

選取器Selector 大約分成以下幾種：

Class selectors

網頁元素碼：<div class="myID">選我</div>
選取器寫法：.myID {樣式:屬性;}

ID selectors

網頁元素碼：<div id="myID">選我</div>
選取器寫法：#myID {樣式:屬性;}

Type selectors（類型）

網頁元素碼：<div>選我</div>
選取器寫法：div {樣式:屬性;}

Universal selector（全域）

網頁元素碼：網頁內所有元素都會套用設定
選取器寫法：* {樣式:屬性;}

Attribute selectors（屬性器）

網頁元素碼：<div title="myTitle">選我</div>
選取器寫法：div[title] {樣式:屬性;} 只要含有屬性就可以了。
選取器寫法：div[title=myTitle]{樣式:屬性;}屬性的值必需相同才可以。
選取器寫法：div[title~=my]{樣式:屬性;}屬性的值中部份符合就可以了。

Descendant combinator（後代）

網頁元素碼：<div><span>選我</span><p>我沒被選</p></div>
選取器寫法：div span {樣式:屬性;}

Child combinator（子元素）

網頁元素碼：<div><span>選我</span><p><span>我沒被選</span></p></div>
選取器寫法：div > span {樣式:屬性;} 同樣是 span 但兩者必須為父子關係才有效。

Adjacent sibling combinator（同層相鄰元素）

網頁元素碼：<p>我沒被選</p><div></div><span>選我</span><span>我沒被選</span>
選取器寫法：div + span {樣式:屬性;}

General sibling combinator（所有同層元素）

網頁元素碼：<div></div><span>選我</span><span>選我</span><p>我沒被選</p>
選取器寫法：div ~ span {樣式:屬性;}

Pseudo-classes（偽類）

Pseudo 又可分為很多種：

1. :link (連結平常的樣式)
2. :visited (連結查閱後的樣式)
3. :hover (滑鼠滑入的樣式)
4. :active (滑鼠按下的樣式)
5. :focus (目標為焦點的樣式)
6. :lang(X) (當語言為 X 的樣式)
7. :first-child (第一個元素的樣式)

網頁元素碼：<div></div>
選取器寫法：div:link{樣式:屬性;} 以連結平常的樣式為例！
選取器寫法：div:hover{樣式:屬性;} 以滑鼠滑入的樣式為例！

Pseudo-elements（偽元素）

這邊的偽元素選取器其實還有蠻多的，但這兩個是比較常用的：

1. :first-line (元素的第一行)
2. :first-letter (元素的第一個字母)

網頁元素碼：<div></div>
選取器寫法：div:first-line{樣式:屬性;}

Groups of selectors（群組）

用來同時指定多個 Selector 選取器統一定義樣式。
網頁元素碼：<div></div><p></p><span id="myID"></span>
選取器寫法：div , p , #myID{樣式:屬性;}

以上的選取器 Selector 基本上是可以交互使用的，比如說你可以用ID selectors 配合Descendant combinator：

網頁元素碼：<div id='myID'><span>選我</span><p>我沒被選</p></div>
選取器寫法：#myID span {樣式:屬性;}

so! 有沒有很簡單的一目了然！

• This article contributed on Yampiz Forum «CSS»
• This is a declared original article, to respect the copyright, please do not repost this article without the consent of the author.
• Keywords : 樣式(23), 屬性(18), 選取器寫法(16), 網頁元素碼(13), selectors(6), Selector(6), combinator(5), 元素(4), title(4), first(4), Pseudo(3), 第一(2), 樣式為例(2), sibling(2), myTitle(2), hover(2), 魚戀把CSS(1), 類型(1), 關鍵(1), 部份其實(1)