好程序員web前端CSS選擇符（選擇器）:表示要定義樣式的對象

好程序員web前端CSS選擇符（選擇器）:表示要定義樣式的對象

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

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

說明：

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

b)全部的頁面元素均可以做爲選擇符;

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

2) 當統一文檔某個元素的顯示效果時，可使用類型選擇符
（如：改變文檔全部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) 最大的用處：建立網頁的外圍結構。

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">

                   <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;}只能將內容爲222222的span標籤改顏色

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

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

7、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 
內聯樣式的權重爲1000
繼承樣式的權重爲0000 

8、頁面中的註釋

Html註釋
<!-- 註釋內容 -->

css的註釋 /* 我是css的註釋 */