容器查询不能直接控制伪元素样式，因其仅提供条件作用域，伪元素仍依附宿主元素且尺寸计算以宿主为准；最稳妥方式是用@container控制伪元素的content、opacity等属性。
container 查询不能直接控制伪元素样式
容器查询（@container）本身不生成新选择器，它只是提供一个基于父容器尺寸的条件作用域。伪元素（如 ::before、::after）必须依附于真实元素存在，而 @container 规则里写的样式，只能作用于该容器内已声明的、有对应 DOM 节点的选择器。
常见错误是试图这样写：
@container (min-width: 400px) {
.card::before { content: "wide"; }
}
这语法合法，但问题在于：.card::before 的渲染行为仍取决于 .card 元素自身是否满足伪元素触发条件（比如 content 非空、display 不为 none），而容器查询不会“唤醒”或“抑制”伪元素——它只负责在条件成立时应用你写的那条 CSS 规则。
- 如果
.card::before默认没定义content，那即使进了@container块，也不会凭空出现 - 如果
.card本身被display: none或visibility: hidden控制，@container再宽也无效 - 伪元素的尺寸计算（如
width: 100%）仍以.card的盒模型为准，不是以容器查询的“宽度值”为基准
真正可控的是伪元素的「内容」和「显隐」
最稳妥的用法，是把伪元素当作一个可开关的视觉层，用 @container 控制它的 content、display、opacity 或 transform：
.card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 4px;
background: #1890ff;
opacity: 0;
transition: opacity 0.2s;
}
@container (min-width: 480px) {
.card::before {
opacity: 1;
}
}
- 务必确保父容器已设
container-type: inline-size，否则整个@container块被忽略 - 避免用
display: none ↔ block切换，容易引发重排；opacity+pointer-events: none更平滑 - 若需不同内容，可用
content: "small"/content: "large"，但注意字符串不能含引号嵌套，且不支持变量
:has() 和 @container 无法联动控制伪元素
别尝试写 .card:has(@container (min-width: 400px))::before——浏览器根本不认识这种语法。:has() 是选择器，@container 是媒体查询变体，二者不在同一解析层级，目前所有浏览器都会直接丢弃整条规则。
真要根据容器尺寸 + 其他状态（比如是否有某个子节点）来决定伪元素行为，只能靠 JS：
- 监听
ResizeObserver获取容器实际宽度 - 判断宽度阈值 + DOM 状态（如
el.querySelector(".trigger") !== null） - 手动添加/移除 class，例如
el.classList.toggle("container-wide", width > 480) - 再用纯 CSS 写
.card.container-wide::before { ... }
这个组合比硬塞伪类逻辑更可控，也更容易调试。
伪元素尺寸响应父容器宽度时，别依赖 % 或 em
伪元素的盒模型计算，始终绑定在其宿主元素（即 .card）上。如果你在 @container 里给 ::before 设 width: 50%，它按 .card 的宽度算，不是按容器查询所指的那个“父容器”的宽度——除非 .card 就是那个设了 container-type 的容器。
- 优先用
px或ch这类绝对/容器相对单位，避免em（根字体）、rem（根字体）、vw（视口） - 如果伪元素需填满整个可查询容器，确保宿主元素本身
width: 100%且未被 flex/gird 压缩（检查flex-shrink: 0是否误配） - Safari 对
::before在@container中的动画支持略滞后，加will-change: opacity可缓解卡顿
最易被忽略的一点：伪元素没有自己的“容器上下文”，它永远活在宿主元素的格式化上下文中。想让它响应某层外容器的尺寸，唯一办法是让宿主元素成为那个容器，或用 JS 桥接两层关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
