在第一課http://blog.xuite.net/jeanson61/xuite/19428499中，有網友提問甚麼叫做 Type 選擇器、Class 選擇器、和 ID 選擇器，所以補充說明一下。

首先講一下CSS的設定是用來"搭配"HTML語法來使得網頁的呈現內容完整，CSS要怎麼"搭配"HTML語法，就是透過Type 選擇器、Class 選擇器、和 ID 選擇器(selector)的定義(也算是一種語法)，CSS語法就是長成這個樣子↓
選擇器 {
  屬性：設定值；
  ...
}
我們先貼幾個CSS的語法當範例↓
/*主體*/
html{
cursor : url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/4702563/39.gif), pointer;
}

body{  
 font-family: Comic Sans MS,arial,helvetica,sans-serif;
}

/*定位框*/
#container {
padding:0px 0px 0px 0px;
 margin:0px auto;
}

/*檔頭*/
#banner{
 margin: 18px 0px 0px 25px;
 height: 385px; 
}

 /*選單列*/
.menulist{
 padding-top:5px;
 width:100%;
}
然後我貼Xuite頁面的HTML原始碼來做一說明↓


從上圖中，我將程式碼中用紅色框、橘色框與藍色框，三種不同的框線去框出三種不同的選擇器(selector)↓
紅色代表Type 選擇器
藍色代表Class 選擇器
橘色框代表ID 選擇器

紅色就是像body, div, span, img, a, li, ul, h等等HTML語法的標準元件形態的保留字！！所以我們可以直接去定義它的CSS樣式，它的名稱前面不需要有#井字號或是.小數點，所以就是像↓
body {}, div {}, span {}, img{}, a{}等等的CSS語法設定。也可以是組合式的設定↓
#banner a{}, #banner img{}這樣的設定，表示說在banner ID區塊裡面的a連結、或是banner ID區塊裡面的img圖片它們的CSS樣式為何！

藍色的部份像上面的class=menulist，這就是類別型選擇器，是程式開發者自己定義的類別class名稱(這個範例的名稱叫做menulist)，當套用這個類別時，它的CSS樣式就照定義去顯示！這裡的class類別形態的選擇器的名稱前面要加小數點.號，代表它是class選擇器！
 /*選單列*/
.menulist{
 padding-top:5px;
 width:100%;
}
它也可以搭配成.menulist img{}或是.menulist div{}這樣的CSS樣式，
.menulist img{}  表示在.menulist裡面所有圖片的CSS樣式
.menulist div{}   表示在.menulist裡面所有div的CSS樣式
class類別選擇器可以在HTML中反複被使用很多次！像上圖的class="xuiteLink"就被用了三次！！

至於橘色的ID選擇器，則是一個div, img 或是HTML元件的"唯一"名稱，這也是程式開發者可以自己定義(不是HTML裡面的保留字)，跟class類別不同的就是它的名稱只能用一次！在上圖中的範例是：id="container", id="banner", id="my_blog"等等。
在id選擇器的CSS定義中，id名稱前面要加上一個井字號#來做區隔↓
/*定位框*/
#container {
padding:0px 0px 0px 0px;
 margin:0px auto;
}

/*檔頭*/
#banner{
 margin: 18px 0px 0px 25px;
 height: 385px; 
}

以上就是補充說明，有不清楚再補充啦！