@container不能直接设置color，必须通过css变量中转：先在声明container-type: inline-size的容器内用@container按宽度设--text-color等变量，再由子元素用color: var(--text-color)显式读取。
容器查询（@container）本身不能“动态计算”颜色，它只负责启用或禁用样式块；要实现真正响应容器尺寸的主题色切换，必须靠显式设置 CSS 变量 + 后代消费变量，且容器必须声明 container-type: inline-size。
为什么 @container 不能直接改 color 属性值
你写不出 color: var(--text-color) 然后指望它随容器缩放自动重算——变量值是静态的，不会监听 resize 事件。浏览器不支持在单个属性里做运行时条件判断（比如没有 color: if(width > 400px, #007bff, #333) 这种语法）。@container 的作用边界很明确：匹配尺寸范围 → 触发整块规则生效/失效。
- 错误示范：
@container (min-width: 400px) { h2 { color: #007bff; } }—— 这能工作，但无法复用、难维护、不可组合 - 正确路径：用
@container设置变量 → 子元素用var()消费 → 颜色变化由变量驱动，而非重复写选择器 - 变量必须定义在容器内部作用域（如容器自身或其
:root），否则后代无法继承
container-type: inline-size 是硬性前提，漏掉就完全不生效
没加 container-type 的元素，哪怕写了 @container (min-width: 300px)，浏览器也当它不存在。这不是兼容性问题，是规范强制要求。
- 别用
container-type: size：它只对 replaced 元素（如img、iframe）有效，普通div上无效 - 避免父级干扰：如果容器外层是
display: contents或display: none，容器上下文会断裂，@container失效 - 命名不是必须项：
container-name可省略，只靠container-type就能启用默认容器上下文 - 验证是否生效：打开 DevTools → Elements → 选中容器 → 查看 Computed 标签页里是否有
container-type: inline-size
如何让子元素正确消费容器尺寸对应的变量
变量必须从容器作用域“透传”到后代。最稳妥的方式是在容器上用 style 属性内联定义变量，或在容器内部 :root（不推荐）或伪类中设置，但更常用的是直接在容器元素上设变量，再让子元素通过继承或 var() 获取。
- 容器需显式声明变量：
<div class="card" style="--card-bg: #e3f2fd; --card-text: #1976d2;" container> <li>子元素直接引用：<code>.card h3 { color: var(--card-text); background: var(--card-bg); } - 配合
@container切换变量：@container (min-width: 320px) { .card { --card-bg: #e3f2fd; --card-text: #1976d2; } } - 注意作用域链：变量若在容器元素上定义，后代可直接
var()；若定义在:root，则会被全局覆盖，失去局部响应能力 - 不要把
@container套在@media里面：CSS 不支持嵌套媒体规则，@container必须顶层书写 - 变量覆盖顺序很重要：后声明的规则优先级更高。建议把容器查询规则放在媒体查询之后，确保局部响应优先于全局断点
- 手动切换主题（如加
.theme-dark类）时，该类选择器优先级需高于@container规则，否则会被覆盖 - 调试技巧：在 DevTools 中临时删掉某段
@container规则，看颜色是否回退到媒体查询设定的值，可快速定位冲突点
和媒体查询混用时的优先级与陷阱
@container 和 @media 是独立机制，变量最终取值取决于 CSS 级联顺序，不是“谁更智能谁赢”。写错顺序会导致小屏下深色模式失效，或容器缩小时颜色卡在旧值。
真正麻烦的不是写法，而是变量作用域的隐式传递和级联优先级的肉眼不可见性。一个容器里改了 --text-color，但某个子组件用了 color: #333 硬编码，那它永远不响应——这种遗漏比语法错误更难发现。
