其實學習 網頁樣式表(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 又可分為很多種：
- :link (連結平常的樣式)
- :visited (連結查閱後的樣式)
- :hover (滑鼠滑入的樣式)
- :active (滑鼠按下的樣式)
- :focus (目標為焦點的樣式)
- :lang(X) (當語言為 X 的樣式)
- :first-child (第一個元素的樣式)
選取器寫法：div:link{樣式:屬性;} 以連結平常的樣式為例！
選取器寫法：div:hover{樣式:屬性;} 以滑鼠滑入的樣式為例！ - Pseudo-elements（偽元素）
- 這邊的偽元素選取器其實還有蠻多的，但這兩個是比較常用的：
- :first-line (元素的第一行)
- :first-letter (元素的第一個字母)
選取器寫法：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»
本文為原創文章, 為尊重著作權, 未經作者同意請勿任意轉載- 關鍵字 : 樣式(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)
0 0
2011-08-26T15:48:00+0000
