本篇內(nèi)容主要講解“CSS選擇符有什么作用”,感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS選擇符有什么作用”吧!
創(chuàng)新互聯(lián)主營(yíng)甕安網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都App定制開發(fā),甕安h5小程序制作搭建,甕安網(wǎng)站營(yíng)銷推廣歡迎甕安等地區(qū)企業(yè)咨詢
CSS選擇符(選擇器):表示要定義樣式的對(duì)象
1) 元素選擇符/類型選擇符(element選擇器 ) 如:div{width:100px; height:100px; background:red;}
語法:元素名稱{屬性:屬性值;}
說明:
a)元素選擇符就是以文檔語言對(duì)象類型作為選擇符,即使用結(jié)構(gòu)中元素名稱作為選擇符。例如body、div、p,img,em,strong,span......等。
b)所有的頁面元素都可以作為選擇符;
用法:
1)如果想改變某個(gè)元素得默認(rèn)樣式時(shí),可以使用類型選擇符;
(如:改變一個(gè)div、p、h2樣式)
2) 當(dāng)統(tǒng)一文檔某個(gè)元素的顯示效果時(shí),可以使用類型選擇符
(如:改變文檔所有p段落樣式)
2) id選擇器
語法:#id名{屬性:屬性值;}
說明:
A)當(dāng)我們使用id選擇符時(shí),應(yīng)該為每個(gè)元素定義一個(gè)id屬性
如:<div id="box"></div>
B)id選擇符的語法格式是“#”加上自定義的id名
如:#box{width:300px; height:300px;}
C) 起名時(shí)要取英文名,不能用關(guān)鍵字:(所有的標(biāo)記和屬性都是關(guān)鍵字)
如:head標(biāo)記
D)一個(gè)id名稱只能對(duì)應(yīng)文檔中一個(gè)具體的元素對(duì)象,因?yàn)閕d只能定義頁面中某一個(gè)唯一的元素對(duì)象。
E) 最大的用處:創(chuàng)建網(wǎng)頁的外圍結(jié)構(gòu)。
3)群組選擇器
語法:選擇符1,選擇符2,選擇符3{屬性:屬性值;} 例:#top1,#nav1{width:960px;}
說明:當(dāng)有多個(gè)選擇符應(yīng)用相同的樣式時(shí),可以將選擇符用“,”分隔的方式,合并為一組。
4)class選擇器/類選擇器
語法:·class名{屬性:屬性值;}
說明:
A)當(dāng)我們使用class選擇符時(shí),應(yīng)先為每個(gè)元素定義一個(gè)class名稱
B)class選擇符的語法格式是:
"如:<div class="top"></div>"
.top{width:200px; height:100px; background:green;}
用法:class選擇符更適合定義一類樣式;
5)*通配符/通配選擇器
語法:*{屬性:屬性值;}
說明:通配選擇符的寫法是“*”,其含義就是所有元素。
*{margin:0; padding:0;}代表清除所有元素的默認(rèn)邊距和填充值;
margin:0 auto;元素的水平居中
6) 包含選擇器/后代選擇器
語法:選擇符1 選擇符2{屬性:屬性值;}
說明:含義就是選擇符1中包含的所有選擇符2;
用法:當(dāng)我的元素存在父級(jí)元素的時(shí)候,我要改變自己本身的樣式,可以不另加選擇符,直接用包含選擇器的方式解決。
如:結(jié)構(gòu):<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>
樣式 : .list li{background:red;}
6.1:子選擇器
語法:選擇符1>選擇符2{屬性:屬性值;}
說明:選擇符1中的直接子選擇符2
例:<div>
<p><span>111111111</span></p>
<span>2222222</span>
</div>
div>span{color:red;}只能將內(nèi)容為222222的span標(biāo)簽改顏色
7) 偽類選擇器(偽類選擇符)
語法 :
a:link{屬性:屬性值;}超鏈接的初始狀態(tài);
a:visited{屬性:屬性值;}超鏈接被訪問后的狀態(tài);
a:hover{屬性:屬性值;}鼠標(biāo)懸停,即鼠標(biāo)劃過超鏈接時(shí)的狀態(tài);
a:active{屬性:屬性值;}超鏈接被激活時(shí)的狀態(tài),即鼠標(biāo)按下時(shí)超鏈接的狀態(tài);
Link--visited--hover--active。
說明:
A)當(dāng)這4個(gè)超鏈接偽類選擇符聯(lián)合使用時(shí),應(yīng)注意他們的順序,正常順序?yàn)椋?br/>a:link,a:visited,a:hover,a:active,錯(cuò)誤的順序有時(shí)會(huì)使超鏈接的樣式失效;
B)為了簡(jiǎn)化代碼,可以把偽類選擇符中相同的聲明提出來放在a選擇符中;
例如:a{color:red;} a:hover{color:green;} 表示超鏈接的初始和訪問過后的狀態(tài)一樣,鼠標(biāo)劃過的狀態(tài)和點(diǎn)擊時(shí)的狀態(tài)一樣。
七、CSS選擇符的權(quán)重
css中用四位數(shù)字表示權(quán)重,權(quán)重(特殊性)的表達(dá)方式如:0,0,0,0
類型選擇符(元素選擇器)的權(quán)重為0001 如:div{width:100px; height:100px;}
class選擇符的權(quán)重為0010 如:.box{width:100px; height:100px;}
id選擇符的權(quán)重為0100
偽類選擇符的權(quán)重為0010 如:a:link a:visited......
包含選擇符的權(quán)重:為包含選擇符的權(quán)重之和
子選擇符的權(quán)重為0000
屬性選擇符的權(quán)重為0010
偽元素選擇符的權(quán)重為0001
內(nèi)聯(lián)樣式的權(quán)重為1000
繼承樣式的權(quán)重為0000
八、頁面中的注釋
Html注釋
<!-- 注釋內(nèi)容 -->
css的注釋
/* 我是css的注釋 */
到此,相信大家對(duì)“CSS選擇符有什么作用”有了更深的了解,不妨來實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
當(dāng)前題目:CSS選擇符有什么作用
網(wǎng)站鏈接:http://jinyejixie.com/article4/ghogie.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)網(wǎng)站制作、商城網(wǎng)站、微信公眾號(hào)、網(wǎng)站建設(shè)、網(wǎng)站改版、服務(wù)器托管
聲明:本網(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)