css中class和id選擇器有什麼區別？

王铁柱6發表於2024-11-30
CSS

在 CSS 中，class 和 id 選擇器都是用來選擇 HTML 元素並應用樣式的，但它們之間有一些關鍵的區別：

1. 多次使用:

  • class: 可以應用於多個 HTML 元素。這意味著你可以將相同的樣式應用於頁面上的不同元素。 例如，你可以將 class="highlight" 應用於多個段落，使它們都具有相同的突出顯示樣式。
  • id: 在一個 HTML 文件中，每個 id 值必須是唯一的。這意味著一個 id 只能用於一個元素。 例如，id="main-navigation" 只能用於一個導航選單。

2. 優先順序:

  • id: 比 class 具有更高的優先順序。如果一個元素同時具有 id 和 class 選擇器，並且這兩個選擇器都定義了相同的樣式屬性，那麼 id 選擇器的樣式將優先。

3. JavaScript 互動:

  • id: 通常用於 JavaScript。document.getElementById() 方法提供了一種快速有效的方法來選擇具有特定 id 的元素，以便進行操作。
  • class: 也可以用於 JavaScript，但 document.getElementsByClassName() 返回的是一個 HTMLCollection，需要遍歷才能訪問單個元素，或者使用 querySelector(".classname") 和 querySelectorAll(".classname")。

4. 語法:

  • class: 使用點號 (.) 來選擇，例如 .highlight。
  • id: 使用井號 (#) 來選擇，例如 #main-navigation。

總結:

特性 class id
多次使用 可以 不可以
優先順序 低 高
JavaScript 互動 可以，但效率略低於id 更常用，效率更高
語法 . + class 名稱 # + id 名稱

最佳實踐:

  • 使用 class 來對具有相同樣式或功能的元素進行分組。
  • 使用 id 來標識唯一的元素，特別是需要透過 JavaScript 進行互動的元素。 避免過度使用 id，因為它會降低程式碼的靈活性和可重用性。

例如：

<!DOCTYPE html>
<html>
<head>
<title>Class vs ID Example</title>
<style>
.highlight {
  color: red;
}

#main-title {
  font-size: 2em;
  color: blue; /* 這將覆蓋 .highlight 的顏色 */
}
</style>
</head>
<body>

<h1 id="main-title" class="highlight">This is a main title</h1>
<p class="highlight">This is a highlighted paragraph.</p>
<p class="highlight">This is another highlighted paragraph.</p>

</body>
</html>

在這個例子中，h1 元素同時具有 id="main-title" 和 class="highlight"。由於 id 選擇器具有更高的優先順序，h1 的顏色將是藍色，而不是紅色。 而兩個段落元素只有 class="highlight"，所以它們的顏色將是紅色。

相關文章