如何利用HTML的CSS @container的style()查询根据自定义属性值切换样式-html教程-PHP中文网

@container 规则不支持 style() 函数，也不支持基于 data- 属性或 css 自定义属性的条件样式；仅支持 width、height 和 inline-size 等尺寸条件。

如何利用html的css @container的style()查询根据自定义属性值切换样式

Container queries 的 `style()` 函数根本不存在

直接说结论：@container 规则里没有 style() 这个函数，也**不支持根据自定义属性（data- 属性或 CSS 自定义属性）的值做条件样式切换**。这是常见误解——把 JavaScript 的 element.style 或某些框架的语法错当成了原生 CSS 容器查询能力。

真正可用的容器查询条件只有 `width`、`height` 和 `inline-size`

浏览器目前（Chrome 117+、Firefox 124+、Safari 16.4+）只支持基于尺寸的容器查询，例如：

@container (min-width: 400px) {
  .card { padding: 1rem; }
}
@container (max-inline-size: 30ch) {
  .title { font-size: 1.1rem; }
}

这些条件依赖容器的布局尺寸，而非任何属性值。即使你给容器加了 data-theme="dark" 或 style="--status: valid"，@container 无法读取或判断它们。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

想根据自定义属性切换样式？得用 `@media` + `:has()` 或纯 CSS 自定义属性 + `var()`

如果你的目标是“响应式地按状态变样式”，有更实际的路径：

用 :has([data-collapsed="true"])（需注意 Safari 15.4+、Chrome 105+ 支持，但不适用于容器查询上下文）
把状态映射为尺寸变化：比如让 data-status="error" 触发一个隐藏的 height: 0 → height: 1px 变化，再用 @container (min-height: 1px) 捕获——但极其脆弱，不推荐
最稳的方式：用 CSS 自定义属性 + var() 直接控制样式，例如：
.widget { --text-color: #333; }
.widget[data-status="error"] { --text-color: #d32f2f; }
.widget .message { color: var(--text-color); }

别混淆容器查询和元素查询，也没有“CSS style() 函数”这种东西

搜索时如果看到类似 @container style(data-theme) 或 style("data-active") 的写法，基本来自实验性提案（已废弃）、Polyfill 文档，或是某框架的封装语法。原生 CSS 中：
• @container 只接受媒体查询式条件
• style 是 JS 对象，不是 CSS 函数
• data- 属性只能通过属性选择器（如 [data-mode="mobile"]）或 :has() 匹配，不能在 @container 内使用

真正要驱动复杂状态逻辑，JS 仍是绕不开的一环：监听容器尺寸变化（ResizeObserver），再根据数据属性动态增删 class 或更新 style 属性。