使用元件範圍限定 CSS 控制規則作用於哪些元素，並使用共用樣式表在不同頁面重複使用規則。對於 Mac 上的小型 HTML 專案，兩者可以搭配使用；請根據需要搬移和維護的內容，選擇檔案配置。

本指南將帶你為一個本機頁面設定樣式，該頁面包含一張圓角方形卡片和一則獨立的註記。目標是讓卡片外觀可預期，再決定 CSS 應放在頁面內，還是放進可重複使用的檔案。標籤和形狀都是合成範例，不需要框架或下載素材。

你實際上要做哪些選擇？

有兩項決定：CSS 放在哪裡，以及它會選取哪些元素。內嵌樣式表位於 HTML 文件的 style 元素中。外部樣式表是獨立資源，透過 link、rel="stylesheet" 和 href 路徑附加。這些都是 HTML 提供 CSS 的機制；無論採用哪種配置，一般選取器都不會因此自動取得元件邊界。HTML 標準：style 元素，MDN：外部資源連結元素。

原生 CSS @scope 會新增選取邊界。你指定一個根元素，然後撰寫只在該子樹內套用的規則。當周圍文件含有相似元素時，它能讓簡短的選取器繼續派上用場。Chrome 的文件也區分了原生範圍限定與使用產生的類別或屬性重寫選取器的工具。若元件範例依賴這類工具，它們就是額外的必要條件。使用 CSS @scope at-rule 限制選取器的作用範圍。

針對這項工作，可參考以下決策指南。這是根據已記錄機制提出的編輯建議，不是瀏覽器要求。

你目前的工作 建議配置 必須一同移動的內容
將一個小型頁面保留為單一檔案 將 CSS 內嵌在 style 元素中 HTML，以及任何另外引用的素材
在多個頁面維護相同卡片 使用含專用元件類別的外部樣式表 每個 HTML 頁面和共用 CSS
在指定子樹內使用較短的選取器 加入明確根元素的 @scope 規則，可內嵌或外置 CSS 和含有相符根元素的標記
支援範圍限定功能尚不確定的瀏覽器 將必要樣式保留在一般類別規則中 HTML 和包含這些規則的樣式表

因此，「可攜性」需要具體定義。單一 HTML 檔案方便單獨移動。包含 HTML 和 CSS 的資料夾也可以攜移，前提是路徑仍能正確解析。可重複使用的元件還需要第三種可攜性：目的地必須保留選取器所預期的標記掛鉤。

在 Mac 上建立可運作的雙檔範例

建立名為 form-study 的資料夾，並在其中建立兩個純文字檔，分別命名為 index.html 和 shared.css。若使用 TextEdit，請選擇 File > New，再選擇 Format > Make Plain Text，然後貼上程式碼。對於 HTML 檔案，Apple 文件說明要以 .html 副檔名儲存，並在出現提示時選擇 Use .html。確認樣式表的實際檔名為 shared.css，沒有多出的 .txt 副檔名。在 Mac 上使用 TextEdit 處理 HTML 文件。

將以下完整 HTML 文件儲存為 index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Study</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <main class="study-page">
    <h1>Form Study</h1>
    <section class="shape-card">
      <h2 class="shape-card__title">Tile A</h2>
      <div class="shape-card__shape" aria-hidden="true"></div>
      <p>A rounded square.</p>
    </section>
    <section class="plain-note">
      <h2>Note B</h2>
      <p>This section is outside the card.</p>
    </section>
  </main>
</body>
</html>

將以下完整樣式表儲存為 shared.css：

body {
  margin: 0;
  background: #f4f3ef;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.study-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shape-card {
  padding: 1.5rem;
  border: 2px solid #526676;
  border-radius: 1rem;
  background: #ffffff;
}

.shape-card__title {
  margin: 0 0 1rem;
  color: #36576b;
}

.shape-card__shape {
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: #597b91;
}

.plain-note {
  margin-top: 2rem;
}

在 Safari 或其他桌面瀏覽器中開啟 index.html。預期結果是一張有邊框的白色卡片，內含藍色圓角方形，後方則是一則沒有邊框的註記。樣式表連結採用 MDN 記載的模式：HTML 透過樣式表連結上的 href 指定 CSS 資源。MDN：加入樣式表。

此範例刻意為卡片標題指定獨立類別。如此一來，無需原生範圍限定功能，也能清楚呈現預期的樣式關係。頁面背景和字型是文件預設樣式；卡片邊框、標題顏色和形狀則屬於卡片。抽取可重複使用的規則時，請維持這項區分：目的地頁面可能只需要卡片，不需要採用這個頁面的背景或寬度。

若要共用這項設計，請在同一資料夾中建立第二個 HTML 頁面，並使用相同的樣式表連結。如此兩個頁面都會參照同一個 CSS 檔案。請將對該檔案的編輯視為會影響所有連結頁面的變更；修改共用規則後，請檢查每個頁面。

原生範圍限定 CSS 何時有幫助？

當元件包含多個適合使用簡單區域選取器的元素時，可以使用 @scope；尤其是在需要為巢狀內容設定明確下界時。CSS 階層與繼承規範透過根元素和可選的限制元素定義範圍。根元素包含在範圍內；限制元素及其後代不會符合範圍規則的比對條件。這份規範目前是工作草案。CSS 階層與繼承第 6 級：範圍限定樣式。

若要做個小實驗，可將以下選用片段附加到 shared.css。它使用現有範例標記，並改變卡片段落的外觀：

/* Optional addition to shared.css */
@scope (.shape-card) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

在支援此功能的瀏覽器中，卡片內的段落會套用淡色背景和內距。註記段落則不在該規則的範圍內。CSS 仍然放在共用檔案中：範圍限定和共用可以並用。

若之後加入類別為 nested-sample 的巢狀區域，可以用以下片段取代選用片段。這是邊界範例；原始頁面目前還沒有這樣的巢狀區域。

/* Alternative optional fragment */
@scope (.shape-card) to (.nested-sample) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

限制元素會讓該巢狀區域不符合這些選取器的比對條件，但不會建立完整的樣式隔離：color 和 font-family 等繼承屬性仍可能越過範圍限制。診斷某個巢狀元素為何仍呈現出與父元素相似的樣式時，請記住這項差異。MDN：@scope 說明。

.shape-card 這種明確根元素，也能讓 CSS 在檔案間移動時清楚呈現相依關係。目的地文件必須包含具有該類別的元素。單獨移動樣式表無法提供所需標記。

瀏覽器支援有哪些限制？

MDN 目前將 @scope 標示為 Baseline 2026，自 2026 年 3 月起已在最新版瀏覽器中普遍提供。較舊的瀏覽器可能不支援。你的 Mac 放在桌上，並不能代表已安裝的瀏覽器支援哪些 CSS 功能；請查看預計使用的瀏覽器版本所對應的相容性資訊。MDN：@scope 瀏覽器相容性。

若須考慮較舊的瀏覽器，請將卡片的必要樣式保留在上述一般類別規則中。如此一來，選用的範圍限定段落樣式就可以作為增強功能。CSS 錯誤處理機制允許瀏覽器捨棄不支援的內容，同時繼續處理有效 CSS，因此樣式表存在不代表裡面的每條規則都已生效。MDN：CSS 錯誤處理。

若不使用 @scope 也要套用相同的段落樣式，可為卡片段落指定專用類別，例如 shape-card__caption，再以一般規則選取該類別。這會增加一個標記掛鉤，但不必依賴原生範圍限定功能來產生結果。

不要在 style 元素上加入 scoped 屬性，並期待得到相同效果。目前 HTML 標準列出的該元素屬性並不包含它。原生 CSS 範圍限定使用 @scope 規則。HTML 標準：style 元素，MDN：@scope 語法。

如何讓頁面維持可攜性？

對於此範例，移動整個 form-study 資料夾，便能保留 index.html 和 shared.css 之間的關係。若只移動 HTML，樣式表就會留在原處。交接或重新整理已撰寫的頁面前，請先確認以下簡單的相依性約定：

  1. **標記：**保留元件類別，以及選取器所需的任何結構。
  2. **樣式表：**附上 CSS 檔案，並確保 HTML 連結仍指向其所在位置。
  3. **資源：**附上 CSS 引用的任何檔案，並保留或更新其路徑。
  4. **瀏覽器：**為開啟頁面的瀏覽器版本保留受支援的樣式處理方式。

元件加入字型或裝飾檔案後，第三項檢查就很重要。MDN 記載，相對 CSS URL 會以樣式表 URL 為基準解析。因此，若將宣告移到另一個資料夾中的樣式表，所指定的資源位置可能會改變。MDN：url() CSS 函式。

例如，若外部樣式表從專案資料夾移至 styles 子資料夾，直接引用 url("assets/tile.png") 的宣告現在會指向 styles/assets 內。請更新路徑，或保留對應的目錄結構。此範例完全以 CSS 繪製形狀，因此沒有這項相依性。

若優先考量以單一檔案交接，可將提供的 CSS 內嵌於文件 head 中的 style 元素，並移除樣式表連結。如此目前的範例只需要 HTML 檔案。請保留相同的選取器，包括任何選用的明確根元素 @scope 區塊。HTML 支援透過 style 元素內嵌樣式表。HTML 標準：style 元素。

透過搬移並重新載入檢查選擇

將完整專案資料夾複製到另一個位置，再於瀏覽器中開啟複製的 HTML。在該副本中，變更 shared.css 裡的形狀背景色，儲存並重新載入頁面。畫面上的變化可以確認你編輯的是複製頁面所使用的樣式表。

接著檢查卡片和註記。成功的結果會保留卡片樣式，同時讓註記不受選用的範圍限定段落規則影響。若整個頁面失去樣式，請先檢查 CSS 檔名和連結路徑。若只有選用樣式沒有出現，請檢查瀏覽器支援和範圍根元素。若不相關的元素也發生變化，請檢查是否有選取器超出預期的元件範圍。

在 TextEdit 中重新開啟 HTML 時，請選擇 File > Open，再選擇 Show Options 和 Ignore rich text commands，即可查看原始碼。Apple 也說明了日後開啟檔案時可使用的設定 Display HTML files as HTML code instead of formatted text。在 Mac 上使用 TextEdit 處理 HTML 文件。

若主要目標是讓這個小型頁面保持完整，請選擇內嵌 CSS。若多個頁面需要使用相同且持續維護的規則，請選擇共用樣式表。當原生範圍限定能簡化規則且瀏覽器支援時，再加入這項功能。最後實際搬移並重新開啟檔案，檢查所選配置仰賴的標記、樣式表和資源關係。

來源