羊皮紙論壇

羊皮紙論壇

分享讓知識傳播,閱讀讓心靈成長, 創作讓文化傳承,讓我們共同努力。
  • 禁止廣告文
  • 知識傳播
  • 閱讀
  • 心靈成長
  • 創作
  • 文化傳承
羊皮紙論壇目錄 / 程式設計 / 網頁/網站程式 / CSS /

CSS Selector 種類簡介

發表新主題
隨機主題
上個主題
下個主題
|
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, 類型, 關鍵, 部份其實
0 0
2011-08-26T15:48:00+0000


  • 當您未登入羊皮紙時,可以利用臉書 Facebook 登入來發表迴響。若使用羊皮紙會員身份發表迴響則可獲得經驗值及虛擬金幣,用來參加羊皮紙推出的活動。
發表迴響
 
驗證字串

Facebook 粉絲專頁

QRCode 條碼 & APP 連結

說明
本頁網址

在相關服務標籤中,『掃描條碼,在行動裝置』或是『點擊連結按鈕,在本裝置』中開啟網頁或是 APP 相關操作。
QRCode