10. 類別（class）與識別碼（id）(Class and ID)

By /

class 和 id 屬性用來識別 HTML 元素，方便設定樣式、編寫指令碼、建立導覽，以及連結相關元素。

它們是全域屬性，可以用於任何 HTML 元素。

<p class="notice">繼續之前，請先儲存你的工作。</p>
<h2 id="entry-requirements">入讀要求</h2>

使用 class 建立可重用的群組，使用 id 識別文件內的唯一元素。 這兩個屬性本身都不會增加語意。

10.1 類別：可重用的群組

class 將元素歸入一個具名群組：

<p class="notice">請攜帶你的手提電腦。</p>
<p class="notice">請使用 UTF-8 編碼儲存檔案。</p>

兩個段落都屬於 notice 類別。CSS 可以一起設定它們的樣式：

.notice {
  padding: 1rem;
  border-inline-start: 4px solid #005ea8;
  background: #eaf2f8;
}

在 CSS 中，句點表示類別選擇器：

.notice {
  font-weight: 700;
}

句點不是 HTML 類別名稱的一部分。

正確：

<p class="notice">重要資訊。</p>

以下寫法不會符合上面的選擇器：

<p class=".notice">重要資訊。</p>

10.2 同一元素使用多個類別

元素可以有多個類別名稱，以空白分隔：

<p class="notice important">截止日期即將到來。</p>

這個元素同時屬於 notice 和 important 類別：

.notice {
  padding: 1rem;
  background: #eaf2f8;
}

.important {
  border-inline-start: 4px solid #005ea8;
}

不要使用逗號分隔 HTML 類別名稱：

<!-- 使用空白，而不是逗號。 -->
<p class="notice important">請儲存你的工作。</p>

class 屬性中名稱的排列次序，不會決定哪一項 CSS 宣告勝出。這由 CSS 層疊規則決定。

10.3 識別碼：唯一識別元素

id 識別文件內的一個元素：

<section id="course-overview">
  <h2>課程概覽</h2>
  <p>學習 HTML 的基礎知識。</p>
</section>

id 值必須：

  • 不是空值。
  • 在所屬文件內保持唯一。
  • 不包含 ASCII 空白字元，例如空格、Tab 或換行。

不要將相同的 id 指派給多個元素：

<!-- 錯誤：重複的 id。 -->
<h2 id="details">課程資料</h2>
<h2 id="details">聯絡資料</h2>

應改為：

<h2 id="course-details">課程資料</h2>
<h2 id="contact-details">聯絡資料</h2>

相同的 id 可以出現在不同網頁上，因為唯一性是以每份文件為範圍。

id 是單一識別碼，不是像 class 那樣以空白分隔的名稱清單。

10.4 同時使用 class 和 id

元素可以同時具有兩個屬性：

<section id="entry-requirements" class="card">
  <h2>入讀要求</h2>
  <p>不需要具備程式編寫經驗。</p>
</section>

在這個例子中：

  • id="entry-requirements" 識別這個特定章節。
  • class="card" 讓它與其他卡片共用樣式。
特性classid
可以在多個元素上重用可以同一文件內不可以
同一元素可以有多個名稱可以不可以
CSS 選擇器前綴.#
適合可重用樣式適合通常不優先使用
可以作為片段連結目的地單靠它不可以可以
可以供標籤或 ARIA 參照元素單靠它不可以可以

10.5 CSS 類別與識別碼選擇器

類別選擇器以句點開始：

.card {
  padding: 1.25rem;
  border: 1px solid #767676;
}

識別碼選擇器以井號開始：

#course-overview {
  margin-block-start: 2rem;
}

你也可以組合選擇器。

具有特定類別的元素

p.notice {
  line-height: 1.8;
}

這會選取具有 notice 類別的段落。

同時具有兩個類別的元素

.card.featured {
  border-width: 2px;
}

這會選取同時具有 card 和 featured 類別的元素。

符合條件的後代元素

.card .notice {
  margin-block-end: 0;
}

中間的空格表示「位於 .card 元素內的 .notice 元素」，不一定是直接子元素。

多個選擇器共用規則

.notice,
.reminder {
  background: #eaf2f8;
}

逗號用來分隔 CSS 選擇器，不是用來分隔 HTML class 屬性中的名稱。

10.6 特異性與 CSS 層疊

識別碼選擇器的特異性（specificity）高於類別選擇器。

對處於相同層疊條件、其他因素相若的宣告而言：

.notice {
  color: #333;
}

#registration-note {
  color: #005ea8;
}
<p id="registration-note" class="notice">
  必須先完成報名。
</p>

在這個例子中，識別碼選擇器設定的顏色會勝出。

不過，特異性只是層疊規則的一部分。來源、重要性及層疊層（cascade layers）等因素，會在特異性之前考慮。

一般可重用的樣式應優先使用類別。大量使用識別碼選擇器，可能令樣式難以覆寫及維護。

10.7 選擇清晰的名稱

選擇能描述元素用途或角色的名稱：

<section class="course-card">...</section>
<p class="registration-note">...</p>
<h2 id="entry-requirements">入讀要求</h2>

按用途命名通常比按外觀命名更耐用：

較難維護更具描述性
blue-boxcourse-card
big-textpage-intro
left-panelcourse-navigation

對初學者專案而言，實用慣例包括：

  • 使用小寫字母。
  • 使用連字號分隔詞語。
  • 以字母開始。
  • 避免在個別名稱內加入空格及標點符號。
  • 保持拼法及大小寫一致。

這些是命名慣例，不全是 HTML 的強制要求。HTML 允許部分識別名稱，但它們在 CSS 選擇器中需要跳脫處理。

例如，以數字開始的 id 可以是有效 HTML，但在 CSS 選擇器中使用時較不方便。簡單名稱可以避免這些問題。

在一般標準模式文件中，應將 class 和 id 的比對視為區分大小寫：

<p class="Notice">課程資訊。</p>

這不會符合一般的 .notice 選擇器。

10.8 使用 id 作為連結目的地

如超連結章節所述，id 可以成為片段連結的目標：

<a href="#entry-requirements">查看入讀要求</a>

<h2 id="entry-requirements">入讀要求</h2>

井號應放在連結目的地中，不是放在 id 值中。

正確：

<h2 id="entry-requirements">入讀要求</h2>

如果預期連結是 href="#entry-requirements"，就不要寫成 id="#entry-requirements"。

保持已公開使用的 id 穩定。修改 id 可能令書籤及其他網頁的連結失效。

10.9 使用 id 建立標籤及無障礙關係

id 也可以連接相關元素。

表單標籤

<label for="email-address">電郵地址</label>
<input id="email-address" name="email" type="email">

標籤的 for 值與輸入欄位的 id 相符。

各屬性的職責不同：

  • id 識別元素。
  • name 通常用來識別提交表單資料時的欄位值。

兩者不能互相取代。

無障礙名稱與描述

<section aria-labelledby="requirements-heading">
  <h2 id="requirements-heading">入讀要求</h2>
  <p>不需要具備相關經驗。</p>
</section>

這裏的 aria-labelledby 參照標題的 id。

另一個例子：

<label for="display-name">顯示名稱</label>
<input
  id="display-name"
  name="displayName"
  aria-describedby="display-name-help"
>
<p id="display-name-help">使用你希望在個人檔案上顯示的名稱。</p>

被參照的 id 必須存在，而且保持唯一。部分 ARIA 屬性接受以空格分隔的多個 id 參照，但這不代表一個元素可以有多個 id。

在可用的情況下，優先使用原生 HTML 關係；只有在用途明確時才加入 ARIA。

10.10 使用 JavaScript 選取元素

JavaScript 可以按 id 尋找元素：

const overview = document.getElementById("course-overview");

getElementById() 接受不含井號的 id 值。

CSS 選擇器方法則使用選擇器語法：

const overview = document.querySelector("#course-overview");
const firstCard = document.querySelector(".course-card");
const allCards = document.querySelectorAll(".course-card");
方法結果
getElementById()符合的元素，或 null
querySelector()第一個符合的元素，或 null
querySelectorAll()包含符合元素的靜態 NodeList

JavaScript 也可以更新類別：

const overview = document.getElementById("course-overview");

if (overview) {
  overview.classList.add("featured");
  overview.classList.remove("compact");
  overview.classList.toggle("highlighted");
}

使用 classList 管理個別類別，可以避免意外取代其他類別。

如果使用任意識別名稱組合選擇器，應使用適當的跳脫處理，例如 CSS.escape()。簡單且可預測的名稱，能讓日常選取更容易。

10.11 class 和 id 不會增加語意

這些屬性不會改變元素的原生角色：

<div class="heading">課程概覽</div>

即使類別名稱是 heading，這仍然不是標題。

應使用：

<h2 class="section-heading">課程概覽</h2>

同樣地：

  • class="button" 不會將 <div> 變成按鈕。
  • id="navigation" 不會將元素變成導覽區。
  • class="hidden" 不會隱藏任何內容，除非有樣式或指令碼實作該效果。

先選擇合適的 HTML 元素，再按需要加入 class 和 id。

10.12 語言與識別名稱

class 和 id 不會標示內容語言。應使用 lang：

<section class="course-card" lang="zh-Hant-HK">
  <h2 id="chinese-overview">課程簡介</h2>
  <p>本課介紹 HTML 的基本結構。</p>
</section>

在這個例子中：

  • class 提供可重用的樣式掛鈎。
  • id 識別標題。
  • lang 指定內容語言。

識別名稱可以包含 Unicode 字元，但一致而簡單的名稱通常更方便協作及使用工具。

10.13 完整範例：可重用的課程卡片

以下中文版網頁使用重複的類別設定樣式，並使用唯一的 id 建立導覽及章節的無障礙名稱。

主要語言設定為香港繁體中文，英文摘要則有自己的語言設定。

id: hong-kong-html-classes-ids
name: 類別與識別碼 — 可重用的課程卡片
type: html
content: |-
  <!doctype html>
  <html lang="zh-Hant-HK">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>類別與識別碼 | HTML 課程指南</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        color: #222;
        background: #f5f7fa;
        font-family: system-ui, sans-serif;
        line-height: 1.8;
      }

      main {
        max-width: 46rem;
        margin-inline: auto;
        padding: 2rem 1rem;
      }

      h1,
      h2 {
        color: #005ea8;
        line-height: 1.4;
      }

      .page-intro {
        font-size: 1.125rem;
      }

      .course-navigation {
        margin-block: 1.5rem;
        padding: 1rem 1.25rem;
        border: 1px solid #767676;
        border-radius: 0.5rem;
        background: white;
      }

      .course-card {
        margin-block: 1.5rem;
        padding: 1.25rem;
        border: 1px solid #767676;
        border-radius: 0.5rem;
        background: white;
      }

      .course-card.featured {
        border: 2px solid #005ea8;
      }

      .course-card h2 {
        margin-block-start: 0;
      }

      .notice {
        padding: 1rem;
        border-inline-start: 4px solid #005ea8;
        background: #eaf2f8;
      }

      .course-card > :last-child {
        margin-block-end: 0;
      }

      a {
        color: #005ea8;
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      a:focus-visible {
        outline: 3px solid #005ea8;
        outline-offset: 4px;
      }

      [id] {
        scroll-margin-block-start: 1rem;
      }
    </style>
  </head>
  <body>
    <main>
      <h1 id="page-heading">HTML 學習指南</h1>
      <p class="page-intro">
        類別提供可重用的樣式。
        識別碼則用來識別個別目的地及元素關係。
      </p>

      <nav class="course-navigation" aria-label="本頁目錄">
        <ul>
          <li><a href="#html-overview">HTML 概覽</a></li>
          <li><a href="#entry-requirements">入讀要求</a></li>
          <li>
            <a href="#english-summary" lang="en-HK">
              English summary
            </a>
          </li>
        </ul>
      </nav>

      <section
        class="course-card featured"
        aria-labelledby="html-overview"
      >
        <h2 id="html-overview">HTML 概覽</h2>
        <p>
          學習使用標題、段落、連結、
          清單及表格建立內容結構。
        </p>
        <p class="notice">
          <strong>學習提示：</strong>
          加入樣式之前，先選擇有意義的 HTML 元素。
        </p>
      </section>

      <section
        class="course-card"
        aria-labelledby="entry-requirements"
      >
        <h2 id="entry-requirements">入讀要求</h2>
        <p>不需要具備網頁開發經驗。</p>
        <ul>
          <li>純文字或程式碼編輯器</li>
          <li>現代網頁瀏覽器</li>
          <li>基本檔案及資料夾管理能力</li>
        </ul>
        <p><a href="#page-heading">返回網頁主標題</a></p>
      </section>

      <section
        class="course-card"
        lang="en-HK"
        aria-labelledby="english-summary"
      >
        <h2 id="english-summary">English Summary</h2>
        <p>
          Multiple elements can share a class,
          but each ID must be unique within the document.
        </p>
        <p class="notice">
          Classes and IDs do not add semantics
          or specify the content language.
        </p>
        <p><a href="#page-heading">Return to the page heading</a></p>
      </section>
    </main>
  </body>
  </html>

在這個範例中：

  • 三個章節共用 course-card 類別。
  • 第一個章節另外具有 featured 類別。
  • .course-card.featured 選取同時具有兩個類別的卡片。
  • 唯一的標題 id 同時作為連結目的地及章節名稱參照。
  • lang 獨立指定英文內容的語言。
  • 樣式使用類別，而不是高特異性的識別碼選擇器。

10.14 常見錯誤

錯誤較好的做法
在同一文件重用相同 id為每個需要識別的元素提供唯一 id
使用逗號分隔 HTML 類別名稱使用空白分隔
將 CSS 前綴寫入屬性值HTML 使用 notice，CSS 使用 .notice
以為類別排列次序控制 CSS 優先權了解層疊規則
將 id 當作多個名稱的清單使用單一 id；多個群組使用 class
為每個需要樣式的元素加入 id優先使用可重用類別
修改已公開連結使用的 id保持連結目的地穩定
在 for 或 ARIA 中參照不存在的 id檢查目標元素是否存在
以為類別名稱會建立語意角色使用合適的 HTML 元素
使用複雜識別名稱卻沒有處理選擇器跳脫選用簡單名稱，或正確跳脫

本章總結： class 將元素分組，方便重用樣式及指令碼；id 則唯一識別文件內的元素。使用清晰名稱，保持參照有效，並記住語意化 HTML 及語言屬性各有不同職責。

相關文章

Scroll to Top