日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢(xún)
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
實(shí)例解析CSS選擇符及其用法

本文和大家重點(diǎn)討論一下CSS選擇符的用法，這里將所有的CSS選擇符都列舉出來(lái)了，并對(duì)每個(gè)CSS選擇符做單獨(dú)的解釋和舉例，相信本文介紹一定會(huì)讓你有所收獲。

我們是2013年至今的成都網(wǎng)站建設(shè)公司,提供網(wǎng)站建設(shè),電商網(wǎng)站設(shè)計(jì)開(kāi)發(fā),成都外貿(mào)網(wǎng)站制作,響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì),小程序設(shè)計(jì)、等服務(wù)。為客戶創(chuàng)造有價(jià)值的品牌營(yíng)銷(xiāo)體驗(yàn)，讓互聯(lián)網(wǎng)提升企業(yè)的競(jìng)爭(zhēng)力！

CSS選擇符的用法和實(shí)例

本文主要講了CSS選擇符(CSSSelectors)用法和相關(guān)例子，雖然之前已經(jīng)有不少對(duì)于CSS選擇符的文章在網(wǎng)絡(luò)上出現(xiàn)，不過(guò)我還是準(zhǔn)備以自己的方式來(lái)寫(xiě)一寫(xiě)，這也是一種獲得樂(lè)趣的途徑。所以我小小的總結(jié)了一下css1及css2選擇符（本文的CSS選擇符都為css1及css2）的用法及實(shí)例，希望對(duì)大家有些許幫助。

現(xiàn)在已經(jīng)將所有的CSS選擇符都列舉出來(lái)了，將就對(duì)每個(gè)CSS選擇符做單獨(dú)的解釋和舉例。對(duì)于以下的這些例子，有些只是簡(jiǎn)單的應(yīng)用實(shí)例，有些還提供了對(duì)比例子，使得可以明顯的看出該種選擇符的使用范圍和方法。

類(lèi)型選擇符(TypeSelectors)

　　語(yǔ)法：E1

　　說(shuō)明：有的時(shí)候我們也將它叫做CSS標(biāo)簽選擇符，因?yàn)樗侵苯佑胔tml標(biāo)記來(lái)做選擇符進(jìn)行操作。目前所有主流瀏覽器均支持該選擇符，屬于CSS1選擇符。

　　實(shí)例：

 
 
 
    
  
  
  
  1. 　　div{color:#F00;} 
    2. 
  
  
  
  2. 　　
    這里是測(cè)試內(nèi)容
    3. 
  
  
  
  3.

包含選擇符(DescendantSelectors)

　　語(yǔ)法：E1E2

　　說(shuō)明：選擇所有被E1包含的E2，這里的E1和E2即可以是html標(biāo)記，也可以是class或id。目前所有主流瀏覽器均支持該CSS選擇符，屬于CSS1選擇符。

　　實(shí)例：

 
 
 
    
  
  
  
  1. 　　divem{color:#F00;} 
    2. 
  
  
  
  2. 　　.testem{color:#F00;} 
    3. 
  
  
  
  3. 　　
    這里是測(cè)試內(nèi)容
    4. 
  
  
  
  4. 　　這里是測(cè)試內(nèi)容

  • ID選擇符(IDSelectors)

    　　語(yǔ)法：#sID

    　　說(shuō)明：以DOM中作為對(duì)象的***標(biāo)識(shí)符的ID作為選擇符。目前所有主流瀏覽器均支持該選擇符，屬于CSS1選擇符。

    　　實(shí)例：

     
 
 
      
  
  
  
    1. 　　#test{color:#F00;} 
      2. 
  
  
  
    2. 　　這里是測(cè)試內(nèi)容

  • 類(lèi)選擇符(ClassSelectors)

    　　語(yǔ)法：.className

    　　說(shuō)明：其效果等同于E1[class~=className]?？梢詾閷?duì)象的class屬性指定多于一個(gè)值(className)，其方法是用空格將每個(gè)className隔開(kāi)。目前所有主流瀏覽器均支持該選擇符，屬于CSS1選擇符。

    　　實(shí)例：

     
 
 
      
  
  
  
    1. 　　.test{color:#F00;} 
      2. 
  
  
  
    2. 　　.test2{font-size:14px;} 
      3. 
  
  
  
    3. 　　這里是測(cè)試內(nèi)容
  • 　　這里是測(cè)試內(nèi)容

  • #p#分組選擇符(GroupingSelectors)

    　　語(yǔ)法：E1,E2,E3

    　　說(shuō)明：將同樣的定義應(yīng)用于多個(gè)CSS選擇符，可以將選擇符以逗號(hào)分隔的方式并為組。目前所有主流瀏覽器均支持該選擇符，屬于CSS1選擇符。

    　　實(shí)例：

     
 
 
      
  
  
  
    1. 　　.test,p{color:#F00;} 
      2. 
  
  
  
    2. 　　這里是測(cè)試內(nèi)容
  • 　　

    這里是測(cè)試內(nèi)容

  • 通配選擇符(UniversalSelectors)

    　　語(yǔ)法：*

    　　說(shuō)明：選定DOM中的所有對(duì)象。目前所有主流瀏覽器均支持該CSS選擇符，屬于CSS2選擇符。

    　　實(shí)例：

     
 
 
      
  
  
  
    1. 　　*{color:#F00;} 
      2. 
  
  
  
    2. 　　
      這里是測(cè)試內(nèi)容
      3. 
  
  
  
    3. 　　
      這里是測(cè)試內(nèi)容
      4. 
  
  
  
    4.

    子選擇符(ChildSelectors)

    　　語(yǔ)法：E1>E2

    　　說(shuō)明：選擇所有作為E1子對(duì)象的E2，不包括孫輩和更深的關(guān)系。非IE內(nèi)核瀏覽器和IE7及以上瀏覽器支持，屬于CSS2選擇符。

    　　實(shí)例：

     
 
 
      
  
  
  
    1. 　　.test>strong{color:#F00;} 
      2. 
  
  
  
    2. 　　
      3. 
  
  
  
    3. 　　　測(cè)試的內(nèi)容
      4. 
  
  
  
    4. 　　　
      這是測(cè)試的內(nèi)容哦！
      5. 
  
  
  
    5. 　　　測(cè)試的內(nèi)容
      6. 
  
  
  
    6. 　　

    相鄰選擇符(AdjacentSelectors)

    　　語(yǔ)法：E1+E2

    　　說(shuō)明：選擇緊跟在對(duì)象E1之后的所有E2對(duì)象(E1與E2需結(jié)構(gòu)級(jí)別相同)。非IE內(nèi)核瀏覽器和IE7及以上瀏覽器支持，屬于CSS2選擇符。

    　　實(shí)例：

     
 
 
      
  
  
  
    1. 　　p+p{color:#F00;} 
      2. 
  
  
  
    2. 　　
      測(cè)試的內(nèi)容1
      3. 
  
  
  
    3. 　　
      測(cè)試的內(nèi)容2
      4. 
  
  
  
    4. 　　
      測(cè)試的內(nèi)容3
      5. 
  
  
  
    5. 　　
      測(cè)試的內(nèi)容4
      6. 
  
  
  
    6. 　　
      測(cè)試的內(nèi)容5
      7. 
  
  
  
    7. 　　
      測(cè)試的內(nèi)容6
      8. 
  
  
  
    8.

    #p#屬性選擇符(AttributeSelectors)

    　　語(yǔ)法：（CSS選擇符中的屬性選擇符具體再分為4種不同的表現(xiàn)方式）

    　　1.E1[attr]
    　　2.E1[attr=value]
    　　3.E1[attr~=value]
    　　4.E1[attr|=value]

    　　說(shuō)明：

    　　1.選擇具有attr屬性的E1

    　　2.選擇具有attr屬性且屬性值等于value的E1

        　3.選擇具有attr屬性且屬性值為一用空格分隔的字詞列表，其中一個(gè)等于value的E1。

    　　4.選擇具有attr屬性且屬性值為一用連字符分隔的字詞列表，由value開(kāi)始的E1

    　　非IE內(nèi)核瀏覽器和IE7及以上瀏覽器支持，屬于CSS2選擇符。

    　　實(shí)例：

     
 
 
      
  
  
  
    1. 　　div[title]{color:#f00;} 
      2. 
  
  
  
    2. 　　測(cè)試的內(nèi)容
  • 　　div[class=a]{color:#f00;}
  • 　　測(cè)試的內(nèi)容
  • 　　測(cè)試的內(nèi)容
  • 　　div[class~=a]{color:#f00;}
  • 　　測(cè)試的內(nèi)容
  • 　　測(cè)試的內(nèi)容
  • 　　div[title|=a]{color:#f00;}
  • 　　測(cè)試的內(nèi)容
  • 　　測(cè)試的內(nèi)容
  • 　　測(cè)試的內(nèi)容

  •  偽類(lèi)選擇符(CSSPseudo-ClassesReference)

    　　語(yǔ)法：（CSS選擇符中的偽類(lèi)選擇符共有10種）

    　　1.Selector:link{sRules}
    　　2.Selector:visited{sRules}
    　　3.Selector:hover{sRules}
    　　4.Selector:active{sRules}
    　　5.Selector:focus{sRules}
    　　6.Selector1Selector2:first-child{sRules}
    　　7.Selector:first{sRules}
    　　8.Selector:left{sRules}
    　　9.Selector:right{sRules}
    　　10.Selector:lang{sRules}

    　　說(shuō)明：

    　　1.設(shè)置a對(duì)象在未被訪問(wèn)前的樣式表屬性。默認(rèn)值由瀏覽器決定。對(duì)于無(wú)href屬性（特性）的a對(duì)象，此偽類(lèi)不發(fā)生作用。

    　　2.設(shè)置a對(duì)象在其鏈接地址已被訪問(wèn)過(guò)時(shí)的樣式表屬性。默認(rèn)值由瀏覽器決定。定義網(wǎng)頁(yè)過(guò)期時(shí)間或用戶清空歷史記錄將影響此偽類(lèi)的作用。對(duì)于無(wú)href屬性（特性）的a對(duì)象，此偽類(lèi)不發(fā)生作用。

    　　3.設(shè)置對(duì)象在其鼠標(biāo)懸停時(shí)的樣式表屬性。在CSS1中此偽類(lèi)僅可用于a對(duì)象。且對(duì)于無(wú)href屬性（特性）的a對(duì)象，此偽類(lèi)不發(fā)生作用。在CSS2中此偽類(lèi)可以應(yīng)用于任何對(duì)象。

    　　4.設(shè)置對(duì)象在被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式表屬性。在CSS1中此偽類(lèi)僅可用于a對(duì)象。且對(duì)于無(wú)href屬性（特性）的a對(duì)象，此偽類(lèi)不發(fā)生作用。在CSS2中此偽類(lèi)可以應(yīng)用于任何對(duì)象。并且:active狀態(tài)可以和:link以及:visited狀態(tài)同時(shí)發(fā)生。

    　　5.設(shè)置對(duì)象在成為輸入焦點(diǎn)（該對(duì)象的onfocus事件發(fā)生）時(shí)的樣式表屬性。

    　　6.設(shè)置對(duì)象（Selector1）的***個(gè)子對(duì)象（Selector2）的樣式表屬性。

    　　7.設(shè)置頁(yè)面容器***頁(yè)使用的樣式表屬性。僅用于@page規(guī)則。

    　　8.設(shè)置頁(yè)面容器位于裝訂線左邊的所有頁(yè)面使用的樣式表屬性。僅用于@page規(guī)則。

    　　9.設(shè)置頁(yè)面容器位于裝訂線右邊的所有頁(yè)面使用的樣式表屬性。僅用于@page規(guī)則。

    　　10.設(shè)置對(duì)象使用特殊語(yǔ)言的內(nèi)容樣式表屬性。
    　　
    　　:link,:visited,:hover,:active屬于CSS1，目前所有主流瀏覽器均支持a對(duì)象的該4種偽類(lèi)選擇符，非IE瀏覽器和IE7及以上瀏覽器還支持非a對(duì)象的:hover,:active；:focus,:lang屬于CSS2，非IE核心瀏覽器及IE8支持。

    　　實(shí)例：

     
 
 
      
  
  
  
    1. 　　a:link{color:#f00;} 
      2. 
  
  
  
    2. 　　a:visited{color:#666;} 
      3. 
  
  
  
    3. 　　a:hover{color:#F60;text-decoration:none;} 
      4. 
  
  
  
    4. 　　a:active{color:#000;} 
      5. 
  
  
  
    5. 　　css探索之旅
      6. 
  
  
  
    6. 
  
  
  
    7. 　　input:focus,a:focus{background:#f00;
      8. 
  
  
  
    8. /*點(diǎn)擊或按TAB鍵獲得焦點(diǎn)時(shí)生效*/} 
      9. 
  
  
  
    9. 　　css探索之旅
      10. 
  
  
  
    10. 　　
      11. 
  
  
  
    11. 
  
  
  
    12. 　　divem:first-child{color:#f00;} 
      13. 
  
  
  
    13. 　　
      web前端開(kāi)發(fā)權(quán)威指南
      14. 
  
  
  
    14.

    #p#偽對(duì)象選擇符(CSSPseudo-ElementsReference)

    　　語(yǔ)法：（CSS選擇符中的偽對(duì)象選擇符共有4種）

    　　1.Selector:first-letter
    　　2.Selector:first-line
    　　3.Selector:before
    　　4.Selector:after

    　　說(shuō)明：

    　　1.設(shè)置對(duì)象內(nèi)的***個(gè)字符的樣式表屬性。此偽對(duì)象僅作用于塊元素。內(nèi)聯(lián)元素要使用該偽對(duì)象，必須先設(shè)定對(duì)象具有塊元素的表狀。

    　　2.設(shè)置對(duì)象內(nèi)的***行的樣式表屬性。此偽對(duì)象僅作用于塊對(duì)象。內(nèi)聯(lián)對(duì)象要使用該偽對(duì)象，必須先設(shè)定對(duì)象具有塊元素的表狀。

    　　3.用來(lái)和content屬性一起使用，設(shè)置在對(duì)象前（依據(jù)對(duì)象樹(shù)的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。

    　　4.用來(lái)和content屬性一起使用，設(shè)置在對(duì)象后（依據(jù)對(duì)象樹(shù)的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。

    　　這幾個(gè)偽對(duì)象選擇符都為屬于CSS2選擇符，其中:first-letter和:first-line目前所有主流瀏覽器均支持；:before和:after非IE核心瀏覽器及IE8支持。

    　　實(shí)例：

     
 
 
      
  
  
  
    1. 　　div:first-letter{color:#f00;} 
      2. 
  
  
  
    2. 　　
      我是一只丑小鴨，伊啊伊啊喲
      3. 
  
  
  
    3. 
  
  
  
    4. 　　div:first-line{color:#f00;} 
      5. 
  
  
  
    5. 　　
      我是一只丑小鴨，伊啊伊啊喲
      6. 
  
  
  
    6. 
  
  
  
    7. 　　div:before{content:"web";} 
      8. 
  
  
  
    8. 　　
      前端開(kāi)發(fā)
      9. 
  
  
  
    9. 
  
  
  
    10. 　　div:after{content:"...";} 
      11. 
  
  
  
    11. 　　
      大段的文字
      12.

    當(dāng)前名稱(chēng)：實(shí)例解析CSS選擇符及其用法
    網(wǎng)站網(wǎng)址：http://www.dlmjj.cn/article/djecjdo.html

    其他資訊