前端之CSS語法及選擇器

一、css語法：

css由兩大部分組成：選擇符和聲明,聲明由屬性和屬性值兩部分組成;

                 選擇符{屬性:屬性值;屬性:屬性值;}

註: a) 屬性和屬性值之間用冒號連接；

    b）每條聲明結束要加分號；

二、css選擇器：

1.id選擇器：

語法： <標記 id="id名"></標記>

       #id名{屬性:屬性值;}

註：id名是唯一的，不允許出現同名的id！id名不允許使用詞列表的方式！

2.class選擇器：

語法：<標記 class="class名"></標記>

      .class名{屬性:屬性值;}

註:可以有相同的類名， 也可以使用類名詞列表的方式(當所有樣式都與其他元素相同，只有某一個css樣式與其他元素不同)

3.元素選擇符（類型選擇符，標簽選擇器）

語法：標記名稱{屬性:屬性值;}

註：a）如果想改變某個元素的預設樣式時，可以使用類型選擇符；

    b) 當統一文檔某個元素的顯示效果時，可以使用類型選擇符；

4.群組選擇器：

語法：選擇符1,選擇符2,選擇符3{屬性:屬性值;}

註：給多個元素設置同一個樣式時，使用群組選擇器

5.後代選擇器(包含選擇器)：

語法：選擇符1 選擇符2 選擇符3{屬性:屬性值;}

註：選擇符1，選擇符2及選擇符3一定是包含與被包含的關係

6.通配符（通用選擇器）：

語法： *{屬性:屬性值;}

常用寫法： *{margin:0; padding:0;}

註:*匹配html下所有的標簽元素

7.偽類選擇器：

語法： 選擇符:hover{屬性:屬性值;}

超鏈接的四種狀態：

a:link     鏈接沒有被訪問過時的狀態

a:visited  鏈接訪問過後的狀態

a:hover    滑鼠滑過時的狀態

a:active   滑鼠按下時的狀態

三、css權重問題

1.第一等  內聯樣式  style=""  權重：1000

2.第二等  id選擇器            權重：100

3.第三等  class選擇器，偽類選擇器，屬性選擇器   權重：10

4.第四等  類型選擇器，偽元素選擇器      權重：1

註：後代選擇器  權重：各個選擇器權重之和

    群組選擇器  權重：各個選擇器自身的權重