這篇文章主要講解了“CSS選擇符的使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS選擇符的使用”吧！

成都創(chuàng)新互聯(lián)從2013年成立，先為東洲等服務(wù)建站，東洲等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為東洲企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

CSS選擇符詳解

一、類型選擇符

什么是CSS選擇符中類型選擇符？指以網(wǎng)頁中已有的標(biāo)簽類型作為名稱的行徑符。body是網(wǎng)頁中的一個(gè)標(biāo)簽類型，div,p,span都是。
如下：

ExampleSourceCode

body{}  div{}  p{}  span{}

二、群組選擇符

對(duì)于XHMTL對(duì)象，可以對(duì)一組同時(shí)進(jìn)行了相同的樣式指派。使用逗號(hào)對(duì)選擇符進(jìn)行了分隔，這樣書寫的優(yōu)點(diǎn)在于同樣的樣式只需要書寫一次即可，減少代碼量，改善CSS代碼結(jié)構(gòu)。
使用時(shí)應(yīng)該注意“逗號(hào)”是在半角模式下，并非中文全角模式。

如下：

ExampleSourceCode

h2,h3,h7,p,span  {  font-size:12px;  color:#FF0000;  font-family:arial;  }

三、包含選擇符

CSS選擇符中的包含選擇符對(duì)某對(duì)象中的子對(duì)象進(jìn)行樣式指點(diǎn)定，這樣選擇方式就發(fā)揮了作用。需要注意的是，僅對(duì)此對(duì)象的子對(duì)象標(biāo)簽有效，對(duì)于其它單獨(dú)存在或位于此對(duì)象以外的子對(duì)象，不應(yīng)用此樣式設(shè)置。
這樣做的優(yōu)點(diǎn)在于，幫我們避免過多的id、class設(shè)置，直接對(duì)所需的元素進(jìn)行定義。

如下：

ExampleSourceCode

h3span  {  color:red;  }  如下：  bodyh2spanstrong  {  font-weight:bold;  }

四、id選擇符

根據(jù)DOM文檔對(duì)象模型原理所出現(xiàn)的選擇符，對(duì)于一個(gè)XHTML文件，其中的每一個(gè)標(biāo)簽都可以使用一個(gè)id=""的形式進(jìn)行一個(gè)名稱指派，但需要注意，在一個(gè)XHTML文件中id是具有***性而不可以重復(fù)的。

在DIV CSS布局的網(wǎng)頁中，可以針對(duì)不同的用途進(jìn)行命名，如頭部為header、底部為footer。

XHTML如下：

ExampleSourceCode

<dividdivid="content"></div>

CSS如下：
ExampleSourceCode

#content  {  font-size:14px;  line-height:120%;  }

五、class選擇符

其實(shí)id是對(duì)于XHTML標(biāo)簽的擴(kuò)展，而CSS選擇符中class選擇符是對(duì)SHTML多個(gè)標(biāo)簽的一種組合，class直譯的意思是類或類別。對(duì)于XHTML標(biāo)簽使用class=""進(jìn)行名稱指派。與id不同，class可以重復(fù)使用，對(duì)于多個(gè)樣式相同的元素，可以直接定義為一個(gè)class。

使用class的優(yōu)點(diǎn)已不言自明，它對(duì)CSS代碼重用性有良好的體現(xiàn)，眾多的標(biāo)簽均可以使用一個(gè)樣式來定義而不需要每一個(gè)編寫一個(gè)樣式代碼。

XHTML如下：

ExampleSourceCode

<pclasspclass="he"></p> <spanclassspanclass="he"></span> <h6classh6class="he"></h6>

CSS如下：

ExampleSourceCode

.he  {  margin:10px;  background-color:red;  }

六、標(biāo)簽指定式的選擇符

如果想同時(shí)使用id和class，也想同時(shí)使用CSS選擇符中的標(biāo)簽選擇符，可以使用如下的方式：

ExampleSourceCode

h2#content{}  /*表示所有id為content的h2標(biāo)簽*/  h2.p1{}  /*表示所有class為p1的h2標(biāo)簽*  /標(biāo)簽指定式選擇符的精度介于標(biāo)簽選擇符及id/class選擇符之間，  是常用的選擇符之一。

七、組合選擇符

對(duì)于上面的所有選擇符而言，進(jìn)行組合使用。如下：

ExampleSourceCode

h2.p1{}  /*表示h2下的所有class為p1的標(biāo)簽*/  #contenth2{}  表示id為content的標(biāo)簽下的所有h2標(biāo)簽  h2.p1,#contenth2{}  /*表示h2下的所有class為p1的標(biāo)簽以及id為content的標(biāo)簽下的所有h2標(biāo)簽*/  h2#contenth3{}  /*id為content的h2標(biāo)簽下的h3標(biāo)簽*/

CSS選擇符是非常自由與靈活的，可以根據(jù)頁面的需要，使用各種選擇符，盡量結(jié)構(gòu)化與優(yōu)化CSS文件。

感謝各位的閱讀，以上就是“CSS選擇符的使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)CSS選擇符的使用這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前文章：CSS選擇符的使用
網(wǎng)頁路徑：http://chinadenli.net/article4/jsepie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、定制網(wǎng)站、全網(wǎng)營(yíng)銷推廣、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)