我欲封天txt下载,懒人听书

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

實(shí)例解析CSS選擇符及其用法

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

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

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

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

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

類型選擇符(TypeSelectors)

　　語法：E1

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

　　實(shí)例：

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

包含選擇符(DescendantSelectors)

　　語法：E1E2

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

　　實(shí)例：

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

ID選擇符(IDSelectors)

　　語法：#sID

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

　　實(shí)例：

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

類選擇符(ClassSelectors)

　　語法：.className

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

　　實(shí)例：

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

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

#p#分組選擇符(GroupingSelectors)

　　語法：E1,E2,E3

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

　　實(shí)例：

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

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

通配選擇符(UniversalSelectors)

　　語法：*

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

　　實(shí)例：

 
 
 
  
  
  　　*{color:#F00;} 
  
  
  　　這里是測試內(nèi)容
  
  
  　　這里是測試內(nèi)容

子選擇符(ChildSelectors)

　　語法：E1>E2

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

　　實(shí)例：

 
 
 
  
  
  　　.test>strong{color:#F00;} 
  
  
  　　
  
  
  　　　測試的內(nèi)容
  
  
  　　　這是測試的內(nèi)容哦！
  
  
  　　　測試的內(nèi)容

相鄰選擇符(AdjacentSelectors)

　　語法：E1+E2

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

　　實(shí)例：

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

#p#屬性選擇符(AttributeSelectors)

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

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

　　說明：

　　1.選擇具有attr屬性的E1

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

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

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

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

　　實(shí)例：

 
 
 
  
  
  　　div[title]{color:#f00;} 
  
  
  　　測試的內(nèi)容

　　div[class=a]{color:#f00;}

　　測試的內(nèi)容

新聞中心

其他資訊