container queries 不能直接设置颜色，需通过 css 自定义属性中转：先用 @container 按宽度区间设置变量（如 --text-color），再由子元素用 var() 读取；必须声明 container-type，且变量需在容器选择器内设置并显式引用。
Container Queries 本身不支持直接改颜色，得靠自定义属性中转
Container Queries（@container）不能像媒体查询那样直接写 color: red，它只负责触发容器范围内的样式作用域。真正改颜色的，还得是容器内元素用到的 CSS 变量（--color-primary 这类）。所以关键链路是：@container → 设置变量 → 元素读取变量。
常见错误是以为写了 @container (min-width: 400px) { color: blue; } 就能生效——实际无效，因为 color 不是容器自身的可继承样式属性，且未指定作用目标。
- 必须给容器加
container-type: inline-size（或size），否则@container规则完全不解析 - 变量需在容器选择器内设置，例如
.card { --text-color: #333; }，再在@container里覆盖它 - 子元素要用
color: var(--text-color)显式引用，不能依赖继承链自动传递（除非父元素已设该变量并允许继承）
怎么让不同宽度区间对应不同颜色变量值
用多个 @container 块按宽度阶梯覆盖同一变量，顺序很重要：从窄到宽写，避免后写的被前写的覆盖（CSS 层叠规则依然生效）。
.card {
container-type: inline-size;
--text-color: #666;
}
<p>@container (min-width: 300px) {
.card {
--text-color: #444;
}
}</p><p>@container (min-width: 500px) {
.card {
--text-color: #222;
}
}</p><p>@container (min-width: 800px) {
.card {
--text-color: #000;
}
}</p><p>.card p {
color: var(--text-color);
}</p>
- 注意：每个
@container必须带选择器（如.card），不能空着；否则规则被忽略 - 如果容器有 padding 或 border，
inline-size测的是 content box 宽度（不含 padding），不是 outer width - Chrome 105+、Firefox 110+、Safari 16.4+ 支持；旧版 Safari 需用
@supports (container-type: inline-size)包裹降级
为什么用变量比直接写 color 更可靠
直接在 @container 里写 .card p { color: red } 看似简单，但会破坏封装性：一旦子元素结构变化（比如加了 wrapper div），样式就断了；而变量方案让颜色逻辑集中在容器上，子元素只管“用”，不关心“哪来”。
- 变量可被多个子元素复用（
h2、span、svg都能读--text-color） - 支持动态计算，比如
--bg-hue: clamp(200, 220 - 100 * (100vw / 1200), 240);再配合background: hsl(var(--bg-hue), 70%, 60%) - 服务端渲染或 JS 修改时，只需改容器上的变量，无需操作 DOM 样式类
容易被忽略的兼容性与调试陷阱
最常卡住的地方不是语法，而是容器尺寸没真正“被观测”：浏览器必须确认该元素是独立的布局容器，才会启用 Container Queries。
- 确保容器没有
display: inline（得是block、flex、grid等） - 如果容器是
flex子项，父 flex 容器不能设flex-basis: 0或min-width: 0，否则可能压制其尺寸计算 - DevTools 里看不到
@container是否命中——只能靠检查 computed styles 中变量值是否变化，或加outline: 1px solid red辅助定位 - 不要嵌套
@container：当前标准不支持，嵌套写法会被整个忽略
变量名和容器 type 是硬门槛，写错一个字母就静默失效；建议把 container-name 和命名空间变量一起用，多人协作时更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
