HTML的id class介紹 /CSS 的 class 和 ID 兩者有何差異?

余小魚
2 min readJun 3, 2018

--

id

<p id=”footer”>這是用 ID 選擇器的例子。</p>

1.每個HTML元素都可以使用id屬性。2.它的作用是在頁面的所有元素中,將某個元素獨立辨識出來。3.他的值必須以字母或下滑線做開頭(不能使用數字或任何字元)4.同一個頁面上的兩個元素不能有相同的id屬性值(否則該值就不是唯一)5.透過js,id屬性可以讓程式碼與該特定元素互動。6.id屬性是全域屬性(global attribute),因為他可以用在任何元素上

class屬性

<p class=”applylarge applyred”>這是多重 Class 的例子。</p>

1.每個HTML元素都可以使用class屬性。2.有時候你想做的並非獨立識別文件中的單一元素,而是將幾個元素從其他元素中獨立出來。3.在任何元素上的class屬性都可以共用相同的值

CSS 的 class 和 id 兩者有何差異?

這兩者最大的不同,是在於 ID 選擇器在一個 HTML 文件中只能被使用一次,而 Class 選擇器在一個 HTML 文件中可以被使用多次。第二個不同的地方,是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用,而 Class 選擇器無法被 Javascript 運用到。並沒有什麼固定的規則,來決定什麼時候要用 ID 及什麼時候要用 Class。我們的建議是盡量用 Class,因為這樣子最靈活 (同一個 HTML 文件可以利用這類的選擇器多次)。唯一的例外,是當你要用 Javascript 的 GetElementByID 函數時。在這個情況下,你就應該要用 ID。做到好維護  id给js用,class给css用
相同
Class 名稱及 ID 名稱都是對大小寫敏感的。舉例來說,.classone 及 .ClassOne 是代表兩個不同的 Class 選擇器。對於CSS而言,id和class都是選擇器,唯一不同的地方在於權重不同。權重:

!important > id > class > tag

參考資料

  1. https://www.1keydata.com/css-tutorial/tw/class-id.php
  2. HTML&CSS 優化之道
  3. https://www.zhihu.com/question/19550864

--

--