hidden 属性优先级高于 display，会强制覆盖所有 display 设置并使元素彻底退出渲染流程；visibility: hidden 仅隐藏视觉且保留布局和交互能力。

hidden 属性和 display 不是“联动”关系，而是存在明确的优先级覆盖：当两者同时作用于同一元素时，hidden 属性始终胜出，无论 display 值是什么（包括 display: block 或 display: flex）。

hidden 属性会强制覆盖所有 display 设置

HTML 的 hidden 全局布尔属性是语义化控制可见性的“硬开关”。浏览器渲染时，它等价于内联样式 display: none !important —— 注意这个 !important 是隐式内置的，无法被普通 CSS 规则覆盖。

• 即使你写 <div hidden style="display: block">内容</div>，该 div 依然不可见、不占布局空间
• 哪怕用高特异性选择器如 div[hidden] { display: flex !important; }，也无效 —— 浏览器不让你绕过 hidden 的强制隐藏逻辑
• JavaScript 修改 element.style.display = 'block' 同样无效，必须先移除 hidden 属性才能恢复显示

visibility: hidden 和 hidden 属性不是一回事

这是最容易混淆的点：visibility: hidden 是纯 CSS 控制，只影响视觉呈现；而 hidden 是 HTML 属性，影响渲染树构建。两者行为完全不同：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• visibility: hidden 元素仍占布局空间、可被 focus、能响应部分事件（如 click），且 display 值保持生效
• hidden 属性让元素彻底退出渲染流程：不占空间、不可 focus、不触发任何事件（包括 click、mouseenter），子元素也一并失效
• 若同时设置 hidden 和 visibility: visible，前者生效；但若只设 visibility: hidden，再设 display: none，后者会覆盖前者（因为 display: none 比 visibility 优先级更高）

实际开发中该选哪个？

选型取决于控制意图是否需要“语义化”和“深度隔离”：

• 用 hidden：适合条件性完全移除内容（如未授权模块、空数据占位区），尤其需确保 SEO 和无障碍工具忽略该内容时
• 用 display: none：适合频繁切换、需 JS 动态控制显隐的交互区域（如折叠面板、表单字段组），性能开销略高于 visibility（触发 reflow）
• 用 visibility: hidden：适合需要保留占位、做淡入动画（配合 opacity）、或临时屏蔽视觉但保留交互能力的场景（如悬停提示的预加载容器）

真正容易被忽略的是：很多框架（如 Vue 的 v-if）底层其实模拟了 hidden 行为，但如果你手动加了 display 样式又忘了清理，就可能和框架逻辑冲突；更隐蔽的是，某些 UI 库的组件内部用了 hidden，而你在外层用 CSS 强行覆盖 display，结果发现怎么调都不显示 —— 那八成是撞上了这个优先级铁律。

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