hidden属性加了却没隐藏，是因为CSS未配置兜底规则[hidden]{display:none!important}，导致全局样式覆盖其默认行为；它本质是HTML5语义化隐藏机制，非CSS控制。
hidden 属性一加就生效，但 CSS 里没配好兜底规则，它可能当场失效。
hidden 属性为什么加了却没隐藏
hidden 是布尔属性，只要存在（哪怕写成 hidden="false" 或 hidden=""），浏览器就必须按规范执行“从渲染树中移除”，等效于 display: none。但实际不生效，90% 是因为 CSS 层级覆盖了它的默认行为。
常见错误场景：
- 全局写了
div { display: block !important; }，又没定义[hidden] { display: none !important; } - 使用了 CSS 框架（如 Bootstrap）的重置样式，覆盖了原生
[hidden]规则 - 服务端渲染时 HTML 已带
hidden，但 CSS 尚未加载或顺序靠前，导致首屏闪现
解决办法只有一条：确保样式表里有且仅有一条生效的兜底规则：[hidden] { display: none !important; }。推荐放在 @layer base 最末，或 base.css 文件底部。
立即学习“前端免费学习笔记（深入）”；
hidden 和 display: none 的优先级谁更高
hidden 的优先级天然高于绝大多数 CSS 规则——包括带 !important 的 display 声明，除非你显式用更具体的选择器覆盖它。
例如：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
[hidden] { display: none !important; }
#my-div[hidden] { display: block !important; } /* 这条能覆盖 hidden 行为 */
但注意：hidden 不是 CSS 属性，它触发的是浏览器内置逻辑，不是靠样式层叠实现的。所以：
- 写
div { display: block; }→ 会被hidden覆盖 - 写
div[hidden] { display: block !important; }→ 会强行绕过hidden，元素照常显示 - 写
style="display: block"内联样式 → 仍被hidden覆盖（因 hidden 是 DOM 层语义控制）
JavaScript 控制 hidden 时的典型错误
用 JS 切换 hidden 看似简单，但容易踩三个坑：
- 误用
element.setAttribute('hidden', 'false')—— 这不会取消隐藏，反而新增一个值为"false"的hidden属性，依然生效。正确做法是element.removeAttribute('hidden')或element.hidden = false - 在 SSR + hydration 场景下，服务端已渲染
<div hidden></div>，但客户端 JS 执行el.hidden = false前，用户可能看到闪动。需配合 CSStransition或初始opacity: 0缓解 - 对表单控件（
<input hidden>）操作后，直接调用form.submit()，该字段会被完全忽略 —— 这是规范行为，不是 bug。需要提交时可见，就别用hidden，改用position: absolute; left: -9999px
hidden 适合什么场景，不适合什么场景
hidden 的核心价值是语义准确、可访问性干净、DOM 控制轻量。但它不是万能开关。
适合：
- 模态框内容初始不显示：
<dialog hidden>…</dialog> - 表单验证失败后才出现的提示：
<p hidden class="error">邮箱格式错误</p> - 响应式中 JS 检测断点后动态控制的冗余区块：
<div hidden id="desktop-only">…</div>
不适合：
- 需要淡入/滑动等过渡动画的显示切换 ——
hidden无法过渡，只能配合opacity或transform类做视觉补足 - 想隐藏视觉但保留焦点或屏幕阅读器可读 —— 此时应选
visibility: hidden+aria-hidden="true"，而非hidden - 服务端未配好
[hidden]样式，又没做 SSR 兜底 —— 首屏不可靠，不如直接用条件渲染（如 React 的{show && <div>}）<p>真正关键的不是“能不能藏”，而是“藏得是否干净、可预测、可访问”。hidden 在语义明确、无需动画、且需保障无障碍的场景下最可靠——但它必须和 CSS 层级、SSR 策略绑在一起用，单独扔个 <code>hidden属性，风险远大于便利。
