css中Class與ID的區別

來源:互聯網
上載者:User

個class是用來根據使用者定義的標準對一個或多個元素進行定義的。打個比較恰當的比方就是劇本:一個class可以定義劇本中每個人物的故事線,你可以通過css教程,網頁特效等來使用這個類。因此你可以在一個頁面上使用class="frodo" ,class="gandalf",class="aragorn"來區分不同的故事線。還有一點非常重要的是你可以在一個文檔中使用任意次數的 class。
  
至於id,通常用於定義頁面上一個僅出現一次的標記。在對頁面排版進行結構化布局時(比如說通常一個頁面都是由一個頁首,一個前序<masthead>,一個內容地區和一個頁尾等組成),一般使用id比較理想,因為一個id在一個文檔中只能被使用一次。而這些元素在同一頁面中很少會出現大於一次的情況。
  
歸納成一句話就是:class可以反覆使用而id在一個頁面中僅能被使用一次。有可能在很大部分瀏覽器中反覆使用同一個id不會出現問題,但在標準上這絕對是錯誤的使用,而且很可能導致某些瀏覽器的現實問題。(剛才在 dreamweaver中試了一下,確實,並沒有出錯)
  
在實際應用的時候,class可能對文字的排版等比較有用,而id則對宏觀布局和設計放置各種元素較有用。

其它看法

id與class的區別

另外,形如id="aaa"定義的,在css中是這樣設定其樣式的:
#aaa{ 樣式列表 }
而以class="bbb"形式定義的,在css中應該這樣設定其樣式:
.bbb{ 樣式列表 }
(注意前面有一個點)

用途:
 class元素分2種,關 聯的和獨 立的. 關聯的用於html的相關tag的,比如
h1.redone{color:red}
<h1 class= redone> 字型為紅色的 <h1>
<h1> 字型是黑色的 <h1>

獨 立的元素可以用於所有的html元素的,比如
.classname {property:value}

id元素和獨 立的class功能相似,區別是id 是唯一的而且對於網頁特效操作html 元素有協助,

#idname {property: value}

概念定義:

id是元素的名稱,可以供網頁特效或其它指令碼程式來訪問該元素對象,而class是該元素的css類名。

id的值在整個當前網頁中應該是唯一的,即某一個元素定義了id="aaa",那麼這個網頁中其它的元素的id就不能定義成aaa,而class則可以。

id與class的使用原則

據說w3c對於id與class的設定是id具有唯一性,class 具有普遍性。所以我們這裡的使用原則也是依據這一特性建立的。id是不能重複的,所以在 xhtml的結構中,大結構一定是用id。比如標誌、導航、主體內容、著作權。這些呢接我自己制定的規範命名為#logo , #nav , #content , #copyright 這些是雷打不動的命名。有人說布局排版用id,配色背景用class,其實這是不正確的,id與布局排版沒有直接關係,class與配色也不是對等的。有人呢為了麻煩全都用id或是全都用class,全都用class呢還有可理解,全都用id就不正常了,這有悖id唯一性。如果每個id都不一樣,那非累死不可。我通過實踐總結的使用原則是:id需要具有唯一性,並且盡量在外圍使用。而class具有可重複性,並且盡量在結構內部使用。這樣做的好處是有利於網站代碼的後期維護與修改,這樣的做法就會讓所有的class都成為id的子級或是孫級。你可以有兩個兒子但你能有兩個爸爸嗎,就是這個道理。在我們寫 css的時候可以寫成這樣 #father .child {…} 盡量不要讓class包含id,.father #child {…}如果寫成這樣顯得有點可笑 。當然這也不是鐵定的,特殊情況需要特殊對待嘛。但是通常情況下這種形式的必要性不大。

以上就是id與class使用原則,歸總起來一句話:id是唯一的並是父級的,class是可以重複的並是子級的。

id與class的提示

1. 子級的命名的包含父命名中的部分為開頭。這樣方便在編寫css時明確層次關係。

2. class中的子級最好不用id。當然特殊情況特殊對待。

3. class的命名最好命名用大小寫合用。例 .newmovie 這樣的寫法與第一條結合起來使用明確關係最合適。要需要注意的是ie以外的瀏覽器對於大小寫是很敏感的。還有就是一定要以字母開頭。

其實上面講的都是一些大家都明白的內容,只是我撿了個漏先寫下來算是一個總結。希望大家對於id與class的使用提出自己的新觀點新思路。一起總結出最適合也最有效率的規範來。

若出現重複定義時,從優先順序來看是:

style > id > class > 預設的html元素

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

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

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

在實際應用的時候,class可能對文字的排版等比較有用,而id則對宏觀布局和設計放置各種元素較有用

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.