:open 不是标准 CSS 伪类，浏览器完全不支持；details 元素只能用 details[open] 属性选择器匹配展开状态，select 元素无任何 open 状态样式接口。

details 元素没有 :open 伪类

直接说结论：:open 并不是标准 CSS 伪类，**浏览器根本不支持**。你查不到规范定义，也看不到任何主流浏览器（Chrome/Firefox/Safari/Edge）的实现。试图写 details:open { ... } 或 select:open { ... } 会完全失效——样式不会应用，开发者工具里也看不到匹配。

details 的打开状态只能靠 [open] 属性选择器

HTML

元素是原生受控的：用户点击

时，浏览器自动切换其 open 属性的有无（布尔属性，存在即为 true）。所以正确做法是用属性选择器：

• details[open] 匹配已展开的
• details:not([open]) 匹配收起状态
• 动画过渡必须配合 max-height、opacity 等可过渡属性，不能依赖伪类
• 注意：不要写 details[open="true"] —— open 是布尔属性，没有值，写成那样反而不匹配

select 元素根本没有 open 属性或对应伪类

是表单控件，它的下拉展开行为完全由浏览器 UA 控制，**不暴露任何 DOM 属性或 CSS 接口来反映“是否打开”状态**。这意味着：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 不存在 select[open]，也不存在 select:open（哪怕加了 polyfill 或 JS 模拟也不行）
• 无法用纯 CSS 检测或样式化“下拉中”的
• 若真需要响应展开状态，必须用 JavaScript 监听 focus/blur（不精准）或借助 MutationObserver + 自定义下拉组件替代原生

别被 MDN 或某些博客误导

网上偶有文章提到 :open，多是混淆了以下两点：

• 把实验性提案（如旧版 CSS Selectors Level 4 草案中曾短暂出现又撤回的 :open）当成了已实现特性
• 误将
  的 [open] 属性选择器写成伪类形式

真正能用的，只有 details[open] 这一种可靠路径。其他所有带冒号的写法，都是无效的。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！