如何使用CSS選擇符

如何使用CSS選擇符，相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

類型選擇符(TypeSelectors)

語法：E1

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

實(shí)例：

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

包含選擇符(DescendantSelectors)

語法：E1E2

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

實(shí)例：

divem{color:#F00;}  .testem{color:#F00;}  <div>這里是<em>測(cè)試</em>內(nèi)容</div> <divclassdivclass="test">這里是<em>測(cè)試</em>內(nèi)容</div>

ID選擇符(IDSelectors)

語法：#sID

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

實(shí)例：

#test{color:#F00;}  <dividdivid="test">這里是測(cè)試內(nèi)容</div>

類選擇符(ClassSelectors)

語法：.className

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

實(shí)例：

.test{color:#F00;}  .test2{font-size:14px;}  <dividdivid="test">這里是測(cè)試內(nèi)容</div> <dividdivid="testtest2">這里是測(cè)試內(nèi)容</div>

分組選擇符(GroupingSelectors)

語法：E1,E2,E3

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

實(shí)例：

.test,p{color:#F00;}  <dividdivid="test">這里是測(cè)試內(nèi)容</div> <p>這里是測(cè)試內(nèi)容</p>

通配選擇符(UniversalSelectors)

語法：*

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

實(shí)例：

*{color:#F00;}  <div>這里是測(cè)試內(nèi)容</div> <p>這里是測(cè)試內(nèi)容</p>

子選擇符(ChildSelectors)

語法：E1>E2

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

實(shí)例：

.test>strong{color:#F00;}  <divclassdivclass="test"> 　<strong>測(cè)試的內(nèi)容</strong> 　<p>這是<strong>測(cè)試的內(nèi)容</strong>哦！</p> 　<strong>測(cè)試的內(nèi)容</strong> </div>

相鄰選擇符(AdjacentSelectors)

語法：E1+E2

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

實(shí)例：

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

屬性選擇符(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;}  <divtitledivtitle="測(cè)試的內(nèi)容">測(cè)試的內(nèi)容</div>  div[class=a]{color:#f00;}  <divclassdivclass="a">測(cè)試的內(nèi)容</div> <divclassdivclass="ab">測(cè)試的內(nèi)容</div>  div[class~=a]{color:#f00;}  <divclassdivclass="a">測(cè)試的內(nèi)容</div> <divclassdivclass="ab">測(cè)試的內(nèi)容</div>  div[title|=a]{color:#f00;}  <divtitledivtitle="a">測(cè)試的內(nèi)容</div> <divtitledivtitle="abc">測(cè)試的內(nèi)容</div> <divtitledivtitle="a-b-c">測(cè)試的內(nèi)容</div>

偽類選擇符(CSSPseudo-ClassesReference)

語法：（CSS選擇符中的偽類選擇符共有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}

說明：

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

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

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

4.設(shè)置對(duì)象在被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式表屬性。在CSS1中此偽類僅可用于a對(duì)象。且對(duì)于無href屬性（特性）的a對(duì)象，此偽類不發(fā)生作用。在CSS2中此偽類可以應(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è)置頁面容器***頁使用的樣式表屬性。僅用于@page規(guī)則。

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

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

10.設(shè)置對(duì)象使用特殊語言的內(nèi)容樣式表屬性。

:link,:visited,:hover,:active屬于CSS1，目前所有主流瀏覽器均支持a對(duì)象的該4種偽類選擇符，非IE瀏覽器和IE7及以上瀏覽器還支持非a對(duì)象的:hover,:active；:focus,:lang屬于CSS2，非IE核心瀏覽器及IE8支持。

實(shí)例：

a:link{color:#f00;}  a:visited{color:#666;}  a:hover{color:#F60;text-decoration:none;}  a:active{color:#000;}  <ahrefahref="http://blog.doyoe.com/">css探索之旅</a>  input:focus,a:focus{background:#f00;/*點(diǎn)擊或按TAB鍵獲得焦點(diǎn)時(shí)生效*/}  <ahrefahref="http://blog.doyoe.com/">css探索之旅</a> <inputtypeinputtype="text"/>  divem:first-child{color:#f00;}  <div><em>web</em>前端開發(fā)<em>權(quán)威指南</em></div>

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

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

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

說明：

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

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

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

實(shí)例：

div:first-letter{color:#f00;}  <div>我是一只丑小鴨，伊啊伊啊喲</div>  div:first-line{color:#f00;}  <div>我是一只丑小鴨，伊啊伊啊喲</div>  div:before{content:"web";}  <div>前端開發(fā)</div>  div:after{content:"...";}  <div>大段的文字</div>

看完上述內(nèi)容，你們掌握如何使用CSS選擇符的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！