container-name 用于精准绑定 @container 规则与特定容器，避免多容器间误匹配；必须配合 container-type 使用，仅命名无效；它实现逻辑隔离而非样式隔离，不解决类名冲突。
container-name 不是用来“解决样式冲突”的，它是用来精准绑定 @container 规则和特定容器的——没它，多容器场景下样式会互相干扰；用了它，才能让某条规则只对某个容器生效。
为什么没 container-name 就容易“误匹配”
浏览器默认把所有未命名的容器归入“匿名组”。只要写了 @container (min-width: 400px)，这个规则就会匹配页面里**所有**满足宽度条件、且声明了 container-type: inline-size 的父容器——不管它是不是你本意想控制的那个。
- 常见现象：一个卡片列表（
.card-grid）和侧边栏（.sidebar）都设了container-type: inline-size，结果给卡片写的@container (min-width: 320px)，侧边栏里的按钮字体也跟着变大了 - 根本原因：没有
container-name，浏览器无法区分“这是卡片容器”还是“这是侧边栏容器”，只能全量匹配 - 注意：
container-name必须配合container-type才有效；只写container-name: sidebar而不写container-type，该元素压根不会成为可查询容器
怎么正确用 container-name 绑定规则
命名 + 引用是两步操作，缺一不可。命名在 HTML 元素或 CSS 类上，引用在 @container 规则开头。
- 给容器加命名：写成
container-name: sidebar或简写为container: sidebar / inline-size - 在
@container中显式引用：写成@container sidebar (min-width: 280px)，不是@container (min-width: 280px) - 同一元素可有多个名字，用逗号分隔：
container-name: header, nav，对应两个独立的@container块 - 命名不区分大小写，但建议全小写+短横线，比如
product-card，避免和自定义属性（如--color-primary）撞名
container-name 和 CSS 作用域隔离不是一回事
别指望 container-name 能防止第三方库的 .btn 覆盖你的按钮样式——它只管 @container 规则的触发范围，不管选择器优先级或类名全局污染。
立即学习“前端免费学习笔记（深入）”；
- 如果你同时引入 Bootstrap 和 Ant Design，它们的
.btn还是会打架，container-name对此完全无感 - 真正防样式冲突得靠
CSS Modules、data-属性前缀，或者构建时加命名空间前缀（如myapp-btn） -
container-name的价值在于“逻辑隔离”：让卡片组件的响应式逻辑不被侧边栏尺寸意外触发，而不是“样式隔离”
兼容性和实际限制
Chrome 105+、Edge 105+、Safari 16.4+、Firefox 119+（需手动开启）已支持 container-name，但有硬性约束不能绕过：
- 不能用在
:root或body上——它们不构成格式化上下文，container-type会被忽略 - 不能用在
display: contents或position: absolute的元素上——它们不生成布局盒，浏览器查不到尺寸 - Flex/Grid 容器本身不能直接设
container-type；必须在外层加 wrapper，再把container-name和container-type加在 wrapper 上 - 命名容器的尺寸计算基于 content box，所以如果父容器 width 是
max-content，50%可能等于 0px；生产环境推荐用px单位
最常被跳过的其实是 container-type —— 没它，container-name 就是空壳，连注册都失败。命名只是第二步，类型才是准入门槛。
