container-name 是 CSS 容器查询中用于唯一标识可查询容器的名称，必须与 container-type 配合使用才生效；同名会覆盖，嵌套时需命名唯一并显式指定名称以避免就近匹配错误。
container-name 是什么，为什么不能随便起名
在 CSS 容器查询中，container-name 用于给某个元素显式标记为“可查询容器”，后续用 @container 查询时靠它定位。但它不是 ID 或 class，不自动去重——**同名的 container-name 会覆盖前一个，只保留最近的生效容器**。如果你在嵌套结构里多个层级都写了 container-name: card，那么内层的 @container card 实际查到的是离它最近、且满足尺寸条件的那个容器（很可能是它自己），而不是你本意的外层卡片容器。
嵌套场景下必须用唯一名称 + 显式作用域限定
嵌套容器要避免歧义，核心是两点：命名唯一、查询时明确指向目标层级。比如一个 .card 组件内部有 .card__header 和 .card__body，两者都可能成为容器：
-
container-name必须区分层级，例如外层用container-name: card-root，内层标题用container-name: card-header - 查询时不能只写
@container (width > 400px)，而要写@container card-root (width > 400px)，否则浏览器会按就近原则匹配，可能命中错误容器 - 如果某子元素不需要被查，就别设
container-name；设了但没配container-type的元素不会被当作容器（但名字仍会参与覆盖逻辑）
container-name 和 container-type 必须成对出现才有效
container-name 单独写没有任何效果，必须配合 container-type（如 inline-size 或 size）才能激活容器能力。常见误写：
/* ❌ 无效：只有 name，没 type */
.card { container-name: card-root; }
<p>/<em> ✅ 有效：name + type 缺一不可 </em>/
.card { container-name: card-root; container-type: inline-size; }
另外注意：container-type: size 要求元素有明确尺寸（如设置了 width 或 inline-size），否则容器不会触发查询；而 inline-size 只依赖行内方向尺寸，兼容性更好，多数嵌套场景推荐优先用它。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
调试时怎么看哪个容器被实际匹配了
Chrome DevTools（117+）和 Firefox（119+）支持容器查询调试，但需要手动开启：
- 在 Elements 面板选中元素 → 右侧 Styles 标签页下拉到底，勾选 “Show container queries”
- 已生效的容器会在该元素上显示小图标，并标出
name和当前inline-size值 - 若发现
@container xxx没触发，先检查对应元素是否真有container-name: xxx且container-type已设置；再确认它的尺寸是否满足查询条件（比如min-width不够，但父容器其实更宽）
最常被忽略的是：嵌套容器之间没有隐式“继承”或“作用域隔离”，每个 container-name 都是全局扁平注册的，名字撞了就覆盖，不存在“子容器自动属于父容器命名空间”这回事。
