先记住这个答案
容器查询能嵌套。内层声明只有外层和内层都命中时才应用,两层可通过名称分别查不同的祖先。容器单位则按自己的规则选尺寸基准:1cqw 是最近合格宽度查询容器的宽度的百分之一,并不因为规则写在某个命名 @container 内就自动绑定到那个命名容器。
- 嵌套查询表示条件同时成立
- 两层可匹配不同祖先容器
cqw参考最近合格宽度容器- 查询命中容器与单位基准要分别判断
两层条件可以看不同外壳
比如页面外层区块需要足够宽,同时卡片自身也要足够宽,才显示复杂详情。给两层容器分别命名可以避免无名查询都选中最近一层。
.section { container: section / inline-size; }
.card { container: card / inline-size; }
@container section (min-width: 60rem) {
@container card (min-width: 28rem) {
.card__details { display: grid; grid-template-columns: 1fr 1fr; }
}
}.card__details 是两层容器的后代。区块足够宽但卡片仍窄时不切换;卡片够宽但区块条件未满足时也不切换。嵌套不是按两次查询依次覆盖,而是两道条件共同限制同一条样式。
如果确实只看卡片宽度,外层查询会徒增限制。嵌套应对应真实的两层需求,而不是因为页面结构里有两层容器就自动写两层。
容器单位另选尺寸基准
在上面的内层规则写 padding: 2cqw,这个长度由匹配尺寸轴的最近合格容器决定。通常是卡片,但若两者之间又插入了一个更近的尺寸容器,单位基准可能变成那层。不要根据 @container section 的名字推断 cqw 一定取区块宽。
排查尺寸时把“哪条查询命中”和“长度单位用哪个容器”分开检查。没有合格尺寸容器时,容器单位退回小视口单位,页面仍可能显示一个值,而非完全失效。
嵌套时还要分清规则作用范围。两层 @container 只是过滤最终的 .card__details 声明,不会改变 .section 或 .card 自身的尺寸。若内层样式反过来让卡片宽度变化,浏览器需要稳定的尺寸查询容器来避免循环。给容器设置 inline-size 类型,并让变化发生在后代,正是这种写法能成立的前提。
容易答错的地方
- 认为嵌套的内层只会查外层命中的容器
- 内层会按自己的名称与类型寻找合格祖先;可以是另一层容器。
- 认为
cqw跟随当前@container名称 - 容器单位有自己的最近合格尺寸容器选择规则,与规则写在什么名字的查询里不是一回事。
面试官还会怎么问?
不命名两层容器会怎样?
无名查询各自选择最近合格祖先,可能都落到卡片上,达不到分别检查区块和卡片的目的。
cqi 和 cqw 总相同吗?
横排书写模式中常接近;竖排时行内轴与物理宽度不同,两个单位可能不一样。
没有查询容器时 cqw 等于零吗?
不等于零。规范给容器单位提供对应小视口单位的回退基准。
参考资料
示例用于理解所注明的运行环境与边界;延伸学习可结合原文中的更多案例。