container-name

Baseline 已廣泛支援

此特性已經非常成熟，可以在許多裝置和瀏覽器版本上使用。自 2023 年 2 月起，所有主流瀏覽器均已支援。

container-name CSS 屬性指定了一系列查詢容器名稱，這些名稱由容器查詢中的 @container at-rule 使用。容器查詢將根據最近的具有包含上下文的祖先元素的大小或滾動狀態來應用樣式。當包含上下文被命名時，可以使用 @container at-rule 精確地定位它，而不是定位最近的具有包含上下文的祖先元素。

注意：當使用 container-type 和 container-name 屬性時，contain 屬性的 style 和 layout 值會自動應用。

語法

css

container-name: none;

/* A single name */
container-name: my-layout;

/* Multiple names */
container-name: my-page-layout my-component-library;

/* Global Values */
container-name: inherit;
container-name: initial;
container-name: revert;
container-name: revert-layer;
container-name: unset;

值

none

預設值。查詢容器沒有名稱。

<custom-ident>

一個區分大小寫的字串，用於標識容器。適用以下條件：

名稱不得等於 or、and、not 或 default。
名稱值不得加引號。
允許使用旨在表示作者定義識別符號的帶破折號的識別符號（例如，--container-name）。
允許使用多個名稱列表，用空格分隔。

正式定義

初始值	`none`
應用於	所有元素
繼承性	否
計算值	`none` 或識別符號的有序列表
動畫型別	不可動畫化

正式語法

container-name = 
  none             |
  <custom-ident>+

示例

使用容器名稱

給定以下 HTML 示例，它是一個帶有標題和一些文字的卡片元件：

html

<div class="card">
  <div class="post-meta">
    <h2>Card title</h2>
    <p>My post details.</p>
  </div>
  <div class="post-excerpt">
    <p>
      A preview of my <a href="https://example.com">blog post</a> about cats.
    </p>
  </div>
</div>

要建立包含上下文，請在 CSS 中為元素新增 container-type 屬性。以下示例建立了兩個包含上下文，一個用於卡片元資訊，一個用於帖子摘錄：

注意：這些宣告的簡寫語法在 container 頁面中有所描述。

css

.post-meta {
  container-type: inline-size;
}

.post-excerpt {
  container-type: inline-size;
  container-name: excerpt;
}

透過 @container at-rule 編寫容器查詢將在查詢評估為 true 時向容器的元素應用樣式。以下示例有兩個容器查詢，一個僅應用於 .post-excerpt 元素的內容，另一個應用於 .post-meta 和 .post-excerpt 的內容：

css

@container excerpt (width >= 400px) {
  p {
    visibility: hidden;
  }
}

@container (width >= 400px) {
  p {
    font-size: 2rem;
  }
}

有關編寫容器查詢的更多資訊，請參閱 CSS 容器查詢頁面。

使用多個容器名稱

你還可以為容器上下文提供多個名稱，用空格分隔：

css

.post-meta {
  container-type: inline-size;
  container-name: meta card;
}

這將允許你在 @container at-rule 中使用任一名稱來定位容器。如果你想使用多個容器查詢來定位同一個容器，並且任一條件都可能為真時，這會很有用：

css

@container meta (width <= 500px) {
  p {
    visibility: hidden;
  }
}

@container card (width <= 200px) {
  h2 {
    font-size: 1.5em;
  }
}

規範

規範
CSS 條件規則模組第五版 # container-name

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由MDN 貢獻者於2025 年 8 月 5 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題