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 上查看此页面 • 报告此内容的问题