container-property 未生效是因为缺少显式声明 container-type 的祖先容器，且必须满足浏览器兼容性要求、语法规范及仅限 @container 中通过 style() 读取等条件。
container-property 为什么没生效？检查容器是否被正确“注册”
container-property 不是写在任意元素上就起作用的——它只对已声明为容器查询上下文（container query context）的祖先元素生效。换句话说，目标元素必须是某个带 container-type 的父级（或更上层）的后代。
- 必须存在一个显式设置了
container-type: inline-size（或size）的祖先元素，且该元素不能是display: contents或未渲染的（如display: none） - 如果用 Flex/Grid 容器做容器查询宿主，注意某些旧版浏览器（如 Safari 16.4 之前）不支持在
display: flex元素上设container-type，得套一层div - Chrome 110+ 支持
container-name，但若用了命名容器，container-property必须配合同名的@container规则，否则无效
比如这个常见失效场景：
<div class="card">
<h3>标题</h3>
<p>内容</p>
</div>
<p>.card { container-type: inline-size; }
.card h3 { container-property: --title-weight 700; } /<em> ❌ 错：container-property 是 CSS 属性声明，不是样式规则 </em>/</p>container-property 的语法和取值限制很严格
container-property 只能声明自定义属性（CSS custom property），且仅接受特定类型：数字、长度、百分比、颜色、字符串、角度、时间、频率、分辨率、整数。不能是函数、calc() 表达式或复合值（如 1px solid red）。
- 声明时必须带单位（如
--gap: 12px），纯数字会被当成无单位数值，部分浏览器会忽略 - 不支持继承，也不支持通过
inherit或unset设置 - 多个属性需用分号分隔，末尾分号可省略，但中间不能换行
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
.card {
container-type: inline-size;
container-property: --title-size: 1.5rem; --accent-color: #3b82f6;
}
@container 查询里怎么读取 container-property 的值？
container-property 声明的变量，只能在同级或子级的 @container 规则中通过 style() 函数读取，不能在普通 CSS 规则里用 var(--x) 直接调用。
-
style(--prop)返回的是计算后的值（如1.5rem→24px），不是原始声明字符串 - 若属性未声明或值类型不匹配（比如查
style(--color)但声明的是--color: 12），返回invalid，整个媒体查询条件判为 false - 当前所有支持容器查询的浏览器（Chrome 110+、Safari 16.4+、Firefox 119+）都要求
style()必须出现在@container条件表达式中，不能用于选择器或属性值
典型用法：
@container style(--title-size > 1.25rem) {
.card h3 { font-weight: 700; }
}
性能和兼容性：别把它当 JS 状态管理用
container-property 的更新是同步的，但触发时机依赖布局计算——每次容器尺寸变化（包括 resize、字体加载、内容增删导致重排），都会重新评估所有相关 @container 规则。频繁变更自定义属性可能引发意外重排。
- 不要动态高频 setProperty() 修改
container-property对应的 CSS 变量，尤其在 scroll 或 input 事件里 - Safari 目前不支持在
@container中使用style(--x) <= y这类非严格比较，只认==、>、<和!= - Firefox 119+ 才开始支持
container-property，此前版本直接忽略整条声明，连带后续样式也不会应用
真正需要响应式行为的地方，优先考虑传统媒体查询或 JS + ResizeObserver；只有当逻辑强绑定到某块 UI 容器自身尺寸与状态时，才值得引入 container-property。
