今天把ＣＳＳ樣式表的分類和選擇器分類做一個總結和歸納，供初學者參考：
1.樣式表的分類：
A)行類樣式：寫在HTML标簽裡面
例如：<h1 style=”樣式規則.......”></h1>,此例使用行類樣式
B)内嵌樣式：寫在<head></head>之間
例如：<style type=”text/css”>
H1{
樣式規則;
...............................
}
</style>
C)外部樣式：寫在外部，HTML頁面要使用時連結或者導入
例如：連結<link ...........................>
導入:： <style type="text/css">
@import url("style/index.css");
</style>
2.選擇器
A)HTML選擇器：選擇器的名字就是HTML标簽名
B)CLASS選擇器：以.号開頭，引用時使用class=”類名”
C)ID選擇器：以#開頭，引用時使用ID＝”ID名”
3.A标簽樣式
| 名稱 | 涵義 |
| a或a:link | 連結靜止狀态 |
| a:hover | 滑鼠懸停 |
| a:active | 滑鼠正在點選 |
| a:visited | 滑鼠點選後 |
4.選擇器的分類：
1. HTML選擇器：選擇器的名字就是HTML标簽
2. 類選擇器：以.号開頭命名，引用時使用class=“類名”
3. ID選擇器：以#号開頭，引用時使用“ID=選擇器名”
| 4．群組選擇器： |
| 例如：h2,li,.myca{ } 表示h2和li和類選擇器都采用同一種樣式 |
| 5.包含選擇器(也叫後代選擇器) |
| 例如：#d1 ul li{ } 表示包含在d1下面的ul下面，ul下面的li采用此樣式 |
| 6.子元素選擇器 |
| 例如：h1 > em{ color:red } <h1><span>這是<em>第一</em>個H1</span></h1> <h1>這是<em>第二</em>個H1</h1> 表示第2個em會起作用，第一個不會起作用 |
| 7.相鄰兄弟選擇器 |
| 例如：h1+p{ } 表示“緊跟在h1後面的段落起作用，h1和p擁有共同的父親” |
| 8.通配符選擇器* |
| 例如：*{ font-size:12px; } 表示網頁中所有的元素都采用這種樣式 實際應用中，下面的情況比較常見： *{ margin:0; Padding:0 } |
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)