1. 程式人生 > >css中id和class 的區別

css中id和class 的區別

        ID與Class區別,新手的我對此非常迷茫,不知道什麼時候該用id,什麼時候該用class。經過學習,我總結如下:

   一、在web標準中是不容許重複ID的,例如 div id="a" 不容許重複2次;而class所定義的是類,理論上可以無限重複。以根據需要多次引用。

  二、屬性的優先順序問題:ID 的優先順序要高於class,我們在下面的程式碼中有示例說明。

  三、方便JS等客戶端指令碼的引用,如果在頁面中要對某個物件進行指令碼操作,那麼可以給他定義一個ID,否則只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費時間資源,遠遠不如一個ID來得簡單與快捷。

  總體來說,就是“class是設定標籤的類,id是設定標籤的標識”id是一個標籤,用於區分不同的結構和內容,就象你的名字,如果一個屋子有2個人同名,就會出現混淆;class是一個樣式,可以套在任何結構和內容上,就象一件衣服。概念上說就是不一樣的:id是先找到結構/內容,再給它定義樣式;class是先定義好一種樣式,再套給多個結構/內容。在實際應用的時候,Class可能對文字的排版等比較有用,而ID則對巨集觀佈局和設計放置各種元素較有用。

  一個Class是用來根據使用者定義的標準對一個或多個元素進行定義的。打個比較恰當的比方就是劇本:一個Class可以定義劇本中每個人物的故事 線,你可以通過CSS,javascript等來使用這個類。因此你可以在一個頁面上使用class="Frodo" ,class= "Gandalf", class="Aragorn"來區分不同的故事線。還有一點非常重要的是你可以在一個文件中使用任意次數的Class。

 至於 ID,通常用於定義頁面上一個僅出現一次的標記。在對頁面排版進行結構化佈局時(比如說通常一個頁面都是由一個頁首,一個報頭< masthead>,一個內容區域和一個頁尾等組成),一般使用ID比較理想,因為一個ID在一個文件中只能被使用一次。而這些元素在同一頁面中 很少會出現大於一次的情況。

 歸納成一句話就是:Class可以反覆使用而ID在一個頁面中僅能被使用一次。有可能在很大部分瀏覽器中反覆使用同一個ID不會出現問題,但在標準上這絕對是錯誤的使用,而且很可能導致某些瀏覽器的現實問題。

 但是在具體使用的時候,哪些樣式該用id,哪些樣式改用class呢?如上所說,在對頁面排版進行結構化

佈局時(比如說通常一個頁面都是由一個頁首,一個報頭< masthead>,一個內容區域和一個頁尾等組成),一般使用ID比較理想,我們的頁頭(header),導航欄(main-menu),登入框(login-box)也都用的是id。但是,設計頁面的時候,在頁頭和主選單之間搜尋框(search-box)應該用class,避免其他位置再加搜尋框。main-col和side-col,或是left-col, right-col ,extra-col, xxx-col,這些用來分欄佈局的樣式也應該用class,避免在一些頁面中加幾個橫跨主欄和側欄的通欄廣告