CSS選擇符有什么作用

本篇內容主要講解“CSS選擇符有什么作用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“CSS選擇符有什么作用”吧!

創(chuàng)新互聯(lián)主營甕安網站建設的網絡公司,主營網站建設方案,成都App定制開發(fā),甕安h5小程序制作搭建,甕安網站營銷推廣歡迎甕安等地區(qū)企業(yè)咨詢

CSS選擇符（選擇器）:表示要定義樣式的對象

1）元素選擇符/類型選擇符（element選擇器 ) 如：div{width:100px; height:100px; background:red;}

語法：元素名稱{屬性：屬性值；}

說明：

a)元素選擇符就是以文檔語言對象類型作為選擇符，即使用結構中元素名稱作為選擇符。例如body、div、p,img,em,strong,span......等。

b)所有的頁面元素都可以作為選擇符;

用法：
1)如果想改變某個元素得默認樣式時，可以使用類型選擇符；
（如：改變一個div、p、h2樣式）

2) 當統(tǒng)一文檔某個元素的顯示效果時，可以使用類型選擇符
（如：改變文檔所有p段落樣式）

2) id選擇器

語法：#id名{屬性：屬性值;}
說明：
A）當我們使用id選擇符時，應該為每個元素定義一個id屬性
如：<div id="box"></div>
B）id選擇符的語法格式是“#”加上自定義的id名
如：#box{width:300px; height:300px;}

C) 起名時要取英文名，不能用關鍵字：(所有的標記和屬性都是關鍵字)
如：head標記
D）一個id名稱只能對應文檔中一個具體的元素對象，因為id只能定義頁面中某一個唯一的元素對象。
E) 最大的用處：創(chuàng)建網頁的外圍結構。

3）群組選擇器

語法：選擇符1，選擇符2，選擇符3{屬性：屬性值;} 例：#top1,#nav1{width:960px;}
說明：當有多個選擇符應用相同的樣式時，可以將選擇符用“，”分隔的方式，合并為一組。

4）class選擇器/類選擇器

語法：·class名{屬性：屬性值;}
說明：
A）當我們使用class選擇符時，應先為每個元素定義一個class名稱
B）class選擇符的語法格式是：

"如：<div class="top"></div>"

.top{width:200px; height:100px; background:green;}
用法：class選擇符更適合定義一類樣式；

5)*通配符/通配選擇器

語法：*{屬性：屬性值；}
說明：通配選擇符的寫法是“*”，其含義就是所有元素。

*{margin:0; padding:0;}代表清除所有元素的默認邊距和填充值；

margin:0 auto;元素的水平居中

6）包含選擇器/后代選擇器

語法：選擇符1 選擇符2{屬性：屬性值;}
說明：含義就是選擇符1中包含的所有選擇符2;
用法：當我的元素存在父級元素的時候，我要改變自己本身的樣式，可以不另加選擇符，直接用包含選擇器的方式解決。

如：結構：<ul class="list">

</ul>

樣式： .list li{background:red;}

6.1:子選擇器

語法：選擇符1>選擇符2{屬性：屬性值；}

說明：選擇符1中的直接子選擇符2

例：<div>

</div>

div>span{color:red;}只能將內容為222222的span標簽改顏色

7）偽類選擇器(偽類選擇符)

語法：
a:link{屬性：屬性值;}超鏈接的初始狀態(tài);
a:visited{屬性：屬性值;}超鏈接被訪問后的狀態(tài);
a:hover{屬性：屬性值;}鼠標懸停，即鼠標劃過超鏈接時的狀態(tài);
a:active{屬性：屬性值;}超鏈接被激活時的狀態(tài)，即鼠標按下時超鏈接的狀態(tài);
Link--visited--hover--active。
說明：
A）當這4個超鏈接偽類選擇符聯(lián)合使用時，應注意他們的順序，正常順序為：
a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超鏈接的樣式失效；
B）為了簡化代碼，可以把偽類選擇符中相同的聲明提出來放在a選擇符中；
例如：a{color:red;} a:hover{color:green;} 表示超鏈接的初始和訪問過后的狀態(tài)一樣，鼠標劃過的狀態(tài)和點擊時的狀態(tài)一樣。

七、CSS選擇符的權重

css中用四位數字表示權重，權重(特殊性)的表達方式如：0，0，0，0
類型選擇符（元素選擇器）的權重為0001 如：div{width:100px; height:100px;}
class選擇符的權重為0010 如：.box{width:100px; height:100px;}
id選擇符的權重為0100

偽類選擇符的權重為0010 如:a:link a:visited......

包含選擇符的權重：為包含選擇符的權重之和
子選擇符的權重為0000

屬性選擇符的權重為0010
偽元素選擇符的權重為0001
內聯(lián)樣式的權重為1000
繼承樣式的權重為0000

八、頁面中的注釋

Html注釋

css的注釋
/* 我是css的注釋 */

到此，相信大家對“CSS選擇符有什么作用”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！

當前題目：CSS選擇符有什么作用
網站鏈接：http://muchs.cn/article4/ghogie.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網站制作、商城網站、微信公眾號、網站建設、網站改版、服務器托管

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

猜你還喜歡下面的內容