hidden属性与display:none非等价：前者是语义化隐藏，保留dom和可访问性；后者是渲染层移除，彻底跳过布局与辅助技术暴露。
hidden 属性和 display: none 不是等价替换关系，而是语义控制与样式控制的双轨机制；它们会互相干扰，但浏览器有明确的优先级规则。
hidden 属性被 display 样式覆盖时会发生什么
当元素同时有 hidden 属性和显式 CSS 设置（如 display: block 或 display: flex）时，display 值会覆盖 hidden 的默认行为——浏览器不再自动应用 display: none，元素就可能意外显示出来。
这是因为 HTML 规范只要求浏览器“默认为 [hidden] 应用 display: none”，但它不禁止 CSS 覆盖这个默认。所以：
- 若你没写
[hidden] { display: none; }，而某个父级 class 或 reset.css 把div设成了display: block，那hidden就失效 - 内联样式如
style="display: flex"优先级更高，会直接压过[hidden]选择器（除非后者带!important） - 媒体查询中取消
[hidden]的 display 设置（比如@media (min-width: 768px) { [hidden] { display: block; } }），就是合法的“驳回隐藏”手段
为什么必须手动加 [hidden] { display: none } 兜底
不是所有项目都引入 normalize.css 或 modern-css-reset，很多 UI 框架或自定义基础样式会重置常见标签的 display 值。比如：
- Ant Design 的
.ant-btn默认是display: inline-flex - Tailwind 的
flex类直接设display: flex - 甚至原生
<button></button>在某些 UA 样式下是display: inline-block
一旦这些样式生效，hidden 就失去视觉效果。所以必须在全局 CSS 中显式声明：
[hidden] {
display: none;
}
不加 !important 通常够用；只有当你确认某处用了不可控的内联 display，才考虑加 !important ——但那是设计缺陷，不是标准用法。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
JS 操作 hidden 时，display 值会不会被恢复
不会。el.hidden = false 或 el.removeAttribute('hidden') 只是移除属性，它不会“还原”你之前手动写过的 el.style.display = 'none'，也不会读取或恢复任何 CSS 中定义的原始 display 值。
换句话说：
- 如果元素原本是
<div style="display: flex">...</div>，你设el.hidden = true，它被隐藏；再设el.hidden = false，它立刻按display: flex显示 - 如果元素原本没设
display，靠浏览器默认display: block，那hidden = false后它就按 block 显示 - 但如果你曾执行过
el.style.display = 'none'，之后又设el.hidden = false，那个内联display: none依然存在，会继续压制显示——这是最常见的“怎么设了 hidden = false 还是看不见”问题
hidden 和 display: none 在可访问性上的根本分歧
两者对屏幕阅读器的影响路径不同：hidden 是语义层声明，浏览器会自动映射为 aria-hidden="true" 并从无障碍树中剔除；而 display: none 是渲染层跳过，辅助技术连 DOM 都收不到。
这意味着：
- 给一个
display: none的<input>手动加aria-hidden="false"是无效的——它根本不在无障碍树里 - 给一个
hidden元素加aria-hidden="false"是有效的，因为它的 DOM 还在，只是语义被覆盖 - 用
display: none隐藏表单错误提示，但忘了同步清除aria-invalid或aria-describedby，会导致读屏软件报错却找不到对应文本
真正容易被忽略的是：hidden 的语义效力依赖于浏览器实现一致性。2026 年主流浏览器都已稳定支持，但 Electron 旧版、WebView 内核或某些定制 UA 中，hidden 可能只触发视觉隐藏，不触发 aria-hidden 映射——这时候必须双写：hidden + aria-hidden="true"。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
