DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS教程:CSS選擇符的用法和實例
CSS教程:CSS選擇符的用法和實例
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:雖然之前已經有不少對於CSS選擇符的文章在網絡上出現,不過我還是准備以自己的方式來寫一寫,這也是一種獲得樂趣的途徑。所以我小小的總結了一下css1及css2選擇符(本文的CSS選擇符都為css1及css2)的用法及實例,希望對大家有些許幫助。

  成天都要與樣式打交道的朋友,相信對CSS選擇符(CSS Selectors)都不會陌生。不過對於剛接觸或者還不是很熟悉css的朋友來說,能夠找到一份對於CSS選擇符的相關例子集合,還是會有一定幫助的。

  雖然之前已經有不少對於CSS選擇符的文章在網絡上出現,不過我還是准備以自己的方式來寫一寫,這也是一種獲得樂趣的途徑。所以我小小的總結了一下css1及css2選擇符(本文的CSS選擇符都為css1及css2)的用法及實例,希望對大家有些許幫助。

  做這之前,當然得將所有CSS選擇符列出來先。

CSS選擇符(CSS Selectors - CSS1 and CSS2)

  • 類型選擇符(Type Selectors) CSS1
  • 包含選擇符(Descendant Selectors) CSS1
  • ID選擇符(ID Selectors) CSS1
  • 類選擇符(Class Selectors) CSS1
  • 分組選擇符(Grouping Selectors) CSS1
  • 通配選擇符(Universal Selectors) CSS2
  • 子選擇符(Child Selectors) CSS2
  • 相鄰選擇符(Adjacent Selectors) CSS2
  • 屬性選擇符(Attribute Selectors)
    • E1[attr] CSS2
    • E1[attr=value] CSS2
    • E1[attr~=value] CSS2
    • E1[attr|=value] CSS2
  • 偽類選擇符(CSS Pseudo-Classes Reference)
    • :link CSS1
    • :visited CSS1
    • :hover CSS1
    • :active CSS1
    • :focus CSS2
    • :first-child CSS2
    • :first CSS2
    • :left CSS2
    • :right CSS2
    • :lang CSS2
  • 偽對象選擇符(CSS Pseudo-Elements Reference)
    • :first-letter CSS2
    • :first-line CSS2
    • :before CSS2
    • :after CSS2

   現在已經將所有的CSS選擇符都列舉出來了,將就對每個選擇符做單獨的解釋和舉例。對於以下的這些例子,有些只是簡單的應用實例,有些還提供了對比例子,使得可以明顯的看出該種選擇符的使用范圍和方法。

類型選擇符(Type Selectors)

  語法:E1

  說明:有的時候我們也將它叫做標簽選擇符,因為它是直接用html標記來做選擇符進行操作。目前所有主流浏覽器均支持該選擇符,屬於CSS1選擇符。

  實例:
  div{color:#F00;}
  <div>這裡是測試內容</div>

包含選擇符(Descendant Selectors)

  語法:E1 E2

  說明:選擇所有被E1包含的E2,這裡的E1和E2即可以是html標記,也可以是class或id。目前所有主流浏覽器均支持該選擇符,屬於CSS1選擇符。

  實例:
  div em{color:#F00;}
  .test em{color:#F00;}
  <div>這裡是<em>測試</em>內容</div>
  <div class="test">這裡是<em>測試</em>內容</div>

ID選擇符(ID Selectors)

  語法:#sID

  說明:以DOM中作為對象的唯一標識符的ID作為選擇符。目前所有主流浏覽器均支持該選擇符,屬於CSS1選擇符。

  實例:
  #test{color:#F00;}
  <div id="test">這裡是測試內容</div>

類選擇符(Class Selectors)

  語法:.className

  說明:其效果等同於E1[class~=className]。可以為對象的class屬性指定多於一個值(className),其方法是用空格將每個className隔開。目前所有主流浏覽器均支持該選擇符,屬於CSS1選擇符。

  實例:
  .test{color:#F00;}
  .test2{font-size:14px;}
  <div id="test">這裡是測試內容</div>
  <div id="test test2">這裡是測試內容</div>

分組選擇符(Grouping Selectors)

  語法:E1,E2,E3

  說明:將同樣的定義應用於多個選擇符,可以將選擇符以逗號分隔的方式並為組。目前所有主流浏覽器均支持該選擇符,屬於CSS1選擇符。

  實例:
  .test,p{color:#F00;}
  <div id="test">這裡是測試內容</div>
  <p>這裡是測試內容</p>

通配選擇符(Universal Selectors)

  語法:*

  說明:選定DOM中的所有對象。目前所有主流浏覽器均支持該選擇符,屬於CSS2選擇符。

  實例:
  *{color:#F00;}
  <div>這裡是測試內容</div>
  <p>這裡是測試內容</p>

子選擇符(Child Selectors)

  語法:E1 > E2

  說明:選擇所有作為E1子對象的E2,不包括孫輩和更深的關系。非IE內核浏覽器和IE7及以上浏覽器支持,屬於CSS2選擇符。

  實例:
  .test > strong{color:#F00;}
  <div class="test">
   <strong>測試的內容</strong>
   <p>這是<strong>測試的內容</strong>哦!</p>
   <strong>測試的內容</strong>
  </div>

相鄰選擇符(Adjacent Selectors)

  語法:E1 + E2

  說明:選擇緊跟在對象E1之後的所有E2對象(E1與E2需結構級別相同)。非IE內核浏覽器和IE7及以上浏覽器支持,屬於CSS2選擇符。

  實例:
  p + p{color:#F00;}
  <p>測試的內容1</p>
  <p>測試的內容2</p>
  <div>測試的內容3</div>
  <p>測試的內容4</p>
  <p>測試的內容5</p>
  <div><p>測試的內容6</p></div>

屬性選擇符(Attribute Selectors)

  語法:(屬性選擇符具體再分為4種不同的表現方式)
  1.E1[attr]
  2.E1[attr=value]
  3.E1[attr~=value]
  4.E1[attr|=value]

  說明:
  1. 選擇具有attr屬性的E1
  2. 選擇具有attr屬性且屬性值等於value的E1
  3. 選擇具有attr屬性且屬性值為一用空格分隔的字詞列表,其中一個等於value的E1。
  4. 選擇具有attr屬性且屬性值為一用連字符分隔的字詞列表,由value開始的E1
  非IE內核浏覽器和IE7及以上浏覽器支持,屬於CSS2選擇符。

  實例:
  div[title]{color:#f00;}
  <div title="測試的內容">測試的內容</div>

  div[class=a]{color:#f00;}
  <div class="a">測試的內容</div>
  <div class="a b">測試的內容</div>

  div[class~=a]{color:#f00;}
  <div class="a">測試的內容</div>
  <div class="a b">測試的內容</div>

  div[title|=a]{color:#f00;}
  <div title="a">測試的內容</div>
  <div title="a b c">測試的內容</div>
  <div title="a-b-c">測試的內容</div>

偽類選擇符(CSS Pseudo-Classes Reference)

  語法:(偽類選擇符共有10種)
  1. Selector:link{ sRules }
  2. Selector:visited{ sRules }
  3. Selector:hover{ sRules }
  4. Selector:active{ sRules }
  5. Selector:focus{ sRules }
  6. Selector1 Selector2:first-child{ sRules }
  7. Selector:first{ sRules }
  8. Selector:left{ sRules }
  9. Selector:right{ sRules }
  10.Selector:lang{ sRules }

  說明:
  1. 設置a對象在未被訪問前的樣式表屬性。默認值由浏覽器決定。對於無href屬性(特性)的a對象,此偽類不發生作用。
  2. 設置a對象在其鏈接地址已被訪問過時的樣式表屬性。默認值由浏覽器決定。定義網頁過期時間或用戶清空歷史記錄將影響此偽類的作用。對於無href屬性(特性)的a對象,此偽類不發生作用。
  3. 設置對象在其鼠標懸停時的樣式表屬性。在CSS1中此偽類僅可用於a對象。且對於無href屬性(特性)的a對象,此偽類不發生作用。在CSS2中此偽類可以應用於任何對象。
  4. 設置對象在被用戶激活(在鼠標點擊與釋放之間發生的事件)時的樣式表屬性。在CSS1中此偽類僅可用於a對象。且對於無href屬性(特性)的a對象,此偽類不發生作用。在CSS2中此偽類可以應用於任何對象。並且:active狀態可以和:link以及:visited狀態同時發生。
  5. 設置對象在成為輸入焦點(該對象的onfocus事件發生)時的樣式表屬性。
  6. 設置對象(Selector1)的第一個子對象(Selector2)的樣式表屬性。
  7. 設置頁面容器第一頁使用的樣式表屬性。僅用於@page規則。
  8. 設置頁面容器位於裝訂線左邊的所有頁面使用的樣式表屬性。僅用於@page規則。
  9. 設置頁面容器位於裝訂線右邊的所有頁面使用的樣式表屬性。僅用於@page規則。
  10.設置對象使用特殊語言的內容樣式表屬性。
  
  :link, :visited, :hover, :active屬於CSS1,目前所有主流浏覽器均支持a對象的該4種偽類選擇符,非IE浏覽器和IE7及以上浏覽器還支持非a對象的:hover, :active;:focus, :lang屬於CSS2,非IE核心浏覽器及IE8支持。

  實例:
  a:link{color:#f00;}
  a:visited{color:#666;}
  a:hover{color:#F60;text-decoration:none;}
  a:active{color:#000;}
  <a href="http://blog.doyoe.com/">css探索之旅</a>

  input:focus,a:focus{background:#f00;/* 點擊或按TAB鍵獲得焦點時生效 */}
  <a href="http://blog.doyoe.com/">css探索之旅</a>
  <input type="text" />

  div em:first-child{color:#f00;}
  <div><em>web</em>前端開發<em>權威指南</em></div>

偽對象選擇符(CSS Pseudo-Elements Reference)

  語法:(偽對象選擇符共有4種)
  1. Selector:first-letter
  2. Selector:first-line
  3. Selector:before
  4. Selector:after

  說明:
  1. 設置對象內的第一個字符的樣式表屬性。此偽對象僅作用於塊元素。內聯元素要使用該偽對象,必須先設定對象具有塊元素的表狀。
  2. 設置對象內的第一行的樣式表屬性。此偽對象僅作用於塊對象。內聯對象要使用該偽對象,必須先設定對象具有塊元素的表狀。
  3. 用來和content屬性一起使用,設置在對象前(依據對象樹的邏輯結構)發生的內容。
  4. 用來和content屬性一起使用,設置在對象後(依據對象樹的邏輯結構)發生的內容。

  這幾個偽對象選擇符都為屬於CSS2選擇符,其中:first-letter和:first-line目前所有主流浏覽器均支持;:before和:after非IE核心浏覽器及IE8支持。

  實例:
  div:first-letter {color:#f00;}
  <div>我是一只丑小鴨,伊啊伊啊喲</div>

  div:first-line {color:#f00;}
  <div>我是一只丑小鴨,伊啊伊啊喲</div>

  div:before {content:"web";}
  <div>前端開發</div>

  div:after {content:"...";}
  <div>大段的文字</div>
 

  待修改完善。。。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved