CSS Selector 種類簡介

其實學習 網頁樣式表(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! 有沒有很簡單的一目了然！

• 本文為原創部落格《 CSS Selector 種類簡介 》, 請尊重著作權, 未經作者同意請勿任意轉載
• 關鍵字 : 選取器寫法, 網頁元素碼, selectors, Selector, combinator, title, first, Pseudo, sibling, myTitle, hover, 魚戀會設計一些範例, 魚戀把CSS, 需求才會發現, 配合Descendant, 選取器統一定義樣式, 選取器Selector, 連結查閱後, 要遇到實際, 要如何簡潔