一.問題來源
制作導航欄，參考別人的代碼，發現的。
二.解析
2.1 概述
id：用來定義頁面中大的樣式，如欄目划分，頂部，正文，底部等；用#top的形式來定義；
class：用來定義一些比較細節的樣式，如具體的一個菜單，一行文字等，用.text的形式來定義。
定義HTML中的標簽，如ul,img,p等時，直接寫：img{}。
2.2 區別
#main和.main有什么區別:#main 定義的是ID為"main"這個元素的樣式，.main 的意思是新建一個名為"main"的樣式
#main 只能定義ID為"main"這個元素的樣式。.main 一但定義以后,可以讓其他的元素來調用,方法為class="main"，用#定義CSS樣式，在調用時必須用ID，用.定義CSS樣式，在調用時必須用CLASS。用#定義的樣式，一般都是定義結構框架，一些大的容器,且在同一個頁面只能出現一次；而且.定義的樣式，一般都是起修飾作用或多次重復的樣式。還一點就是在同一
個層里同時出現ID和CLASS樣式，ID更優先於CLASS。
一個Class是用來根據用戶定義的標准對一個或多個元素進行定義的。打個比較恰當的比方就是劇本：一個Class可以定義劇本中每個人物的故事線，你可以通過CSS，javascript等來使用這個類。因此你可以在一個頁面上使用class="Frodo" ，class="Gandalf"， class="Aragorn"來區分不同的故事線。還有一點非常重要的是
你可以在一個文檔中使用任意次數的Class。
至於 ID，通常用於定義頁面上一個僅出現一次的標記。在對頁面排版進行結構化布局時（比如說通常一個頁面都是由一個頁眉，一個報頭< masthead>，一個內容區域和一個頁腳等組成），一般使用ID比較理想，因為一個ID在一個文檔中只能被使用一次。而這些元素在同一頁面中很少會出現大於一次的情況。
2.3 注意
class可以在頁面里面重復使用，id由於在頁面里面只能出現一次，所以不能重復使用，所以盡量用class來寫，這樣能在頁面里面重復引用你寫的css，減小工作量和代碼量。
這種情況盡量用id：頁面大的模塊里面，用id來區分不同的模塊。比如頁面里面有這樣的模塊：最新新聞，推薦新聞等。就可以考慮用id來區分。
還有一點，由於id是頁面中唯一的，更多的是定義來留給給頁面里面的 javascript用。
參考51CTO，鏈接忘了。