如何使用CSS選擇符

如何使用CSS選擇符，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

類型選擇符(TypeSelectors)

語法：E1

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

實例：

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

包含選擇符(DescendantSelectors)

語法：E1E2

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

實例：

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

ID選擇符(IDSelectors)

語法：#sID

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

實例：

#test{color:#F00;}  <dividdivid="test">這里是測試內容</div>

類選擇符(ClassSelectors)

語法：.className

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

實例：

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

分組選擇符(GroupingSelectors)

語法：E1,E2,E3

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

實例：

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

通配選擇符(UniversalSelectors)

語法：*

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

實例：

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

子選擇符(ChildSelectors)

語法：E1>E2

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

實例：

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

相鄰選擇符(AdjacentSelectors)

語法：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>

屬性選擇符(AttributeSelectors)

語法：（CSS選擇符中的屬性選擇符具體再分為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;}  <divtitledivtitle="測試的內容">測試的內容</div>  div[class=a]{color:#f00;}  <divclassdivclass="a">測試的內容</div> <divclassdivclass="ab">測試的內容</div>  div[class~=a]{color:#f00;}  <divclassdivclass="a">測試的內容</div> <divclassdivclass="ab">測試的內容</div>  div[title|=a]{color:#f00;}  <divtitledivtitle="a">測試的內容</div> <divtitledivtitle="abc">測試的內容</div> <divtitledivtitle="a-b-c">測試的內容</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.設置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;}  <ahrefahref="http://blog.doyoe.com/">css探索之旅</a>  input:focus,a:focus{background:#f00;/*點擊或按TAB鍵獲得焦點時生效*/}  <ahrefahref="http://blog.doyoe.com/">css探索之旅</a> <inputtypeinputtype="text"/>  divem:first-child{color:#f00;}  <div><em>web</em>前端開發<em>權威指南</em></div>

偽對象選擇符(CSSPseudo-ElementsReference)

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

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