七大CSS選擇符用法詳解
你對(duì)CSS選擇符的概念是否了解，這里向大家描述一下CSS選擇符幾種類型的使用，比如類型選擇符，指以網(wǎng)頁中已有的標(biāo)簽類型作為名稱的行徑符。body是網(wǎng)頁中的一個(gè)標(biāo)簽類型，div,p,span都是。
CSS選擇符詳解
一、類型選擇符
CSS選擇符中什么是類型選擇符？指以網(wǎng)頁中已有的標(biāo)簽類型作為名稱的行徑符。body是網(wǎng)頁中的一個(gè)標(biāo)簽類型，div,p,span都是。
如下：
- 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)"是在半角模式下，并非中文全角模式。
如下：
- h1,h2,h6,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)行定義。
如下：
- h2span
- {
- color:red;
- }
如下：
- bodyh1spanstrong
- {
- font-weight:bold;
- }
四、id選擇符
根據(jù)DOM文檔對(duì)象模型原理所出現(xiàn)的選擇符，對(duì)于一個(gè)XHTML文件，其中的每一個(gè)標(biāo)簽都可以使用一個(gè)id=""的形式進(jìn)行一個(gè)名稱指派，但需要注意，在一個(gè)XHTML文件中CSS選擇符id是具有唯一性而不可以重復(fù)的。
在DIV CSS布局的網(wǎng)頁中，可以針對(duì)不同的用途進(jìn)行命名，如頭部為header、底部為footer。
XHTML如下：
- <dividdivid="content"></div>
CSS如下：
- #content
- {
- font-size:14px;
- line-height:120%;
- }
#p#
五、class選擇符
其實(shí)CSS選擇符中id是對(duì)于XHTML標(biāo)簽的擴(kuò)展，而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如下：
- <pclasspclass="he"></p>
- <spanclassspanclass="he"></span>
- <h5classh5class="he"></h5>
CSS如下：
- .he
- {
- margin:10px;
- background-color:red;
- }
六、標(biāo)簽指定式的選擇符
如果想同時(shí)使用CSS選擇符中的id和class，也想同時(shí)使用標(biāo)簽選擇符，可以使用如下的方式：
- h1#content{}
- /*表示所有id為content的h1標(biāo)簽*/
- h1.p1{}
- /*表示所有class為p1的h1標(biāo)簽*/
標(biāo)簽指定式選擇符的精度介于標(biāo)簽選擇符及id/class選擇符之間，是常用的選擇符之一。
七、組合選擇符
對(duì)于上面的所有CSS選擇符而言，進(jìn)行組合使用。如下：
- h1.p1{}
- /*表示h1下的所有class為p1的標(biāo)簽*/
- #contenth1{}
- 表示id為content的標(biāo)簽下的所有h1標(biāo)簽
- h1.p1,#contenth1{}
- /*表示h1下的所有class為p1的標(biāo)簽以及id為content的標(biāo)簽下的所有h1標(biāo)簽*/
- h1#contenth2{}
- /*id為content的h1標(biāo)簽下的h2標(biāo)簽*/
CSS選擇符是非常自由與靈活的，可以根據(jù)頁面的需要，使用各種選擇符，盡量結(jié)構(gòu)化與優(yōu)化CSS文件.
文章出處：標(biāo)準(zhǔn)之路(http://www.aa25.cn/div_css/288.shtml)
【編輯推薦】
