hidden属性被CSS覆盖时元素仍显示，因浏览器仅默认设[hidden]{display:none}，易被更高优先级样式（如flex类、重置样式、媒体查询）覆盖；可靠写法是[hidden]{display:none!important}且需最早加载。
hidden属性被CSS覆盖时为什么元素还显示
因为浏览器只默认给[hidden]加display: none，但这个规则可以被更高优先级的样式覆盖。比如你用了Tailwind的flex类，或者某个父级样式写了div { display: block; }，它会直接压过 UA 默认样式。
常见错误现象：
- 开发者工具里看到元素的
display值是flex或inline-block，而不是none -
[hidden]选择器没写!important，而项目里有重置样式（如normalize.css或Ant Design按钮类） - 媒体查询中写了
@media (min-width: 768px) { [hidden] { display: block; } }却没加!important，导致PC端“驳回隐藏”失败
真正可靠的兜底写法只有一条：[hidden] { display: none !important; }。必须放在全局 CSS 最早加载的位置，不能依赖框架自带规则。
JS操作el.hidden = false后元素仍不可见
这不是hidden失效，而是你之前手动设过el.style.display = 'none'，而el.hidden = false不会自动清除那个内联样式。
立即学习“前端免费学习笔记（深入）”；
实操建议：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 隐藏时统一用
el.hidden = true，别混用el.style.display = 'none' - 显示时先清内联样式：
el.style.display = '';再设el.hidden = false - 检查状态别用
el.hasAttribute('hidden')——服务端已渲染hidden时，JS 设el.hidden = false后它仍返回true；应始终用el.hidden布尔值判断 - 表单控件如
<input hidden>提交时会被完全忽略，需要保留字段值就别用hidden
hidden和display: none同时存在时谁生效
HTML规范明确要求hidden优先级高于所有display值，包括style="display: block"这种内联样式。也就是说，<div hidden style="display: flex">内容</div>依然不可见、不占空间、无法聚焦。
但注意：这个“优先级”仅限于display属性本身。它不阻止你用[hidden] { display: block !important; }强行绕过——虽然这是反模式，且会导致语义混乱。
容易被忽略的关键点：
-
hidden让整个子树退出可访问性树，屏幕阅读器跳过，display: none则无此保证 -
hidden影响表单序列化：<input name="token" value="abc" hidden>在FormData里根本不存在 -
getBoundingClientRect()对两者都返回全零，但offsetParent为null是唯一可靠判断依据
SSR首屏闪现和动画兼容性问题
服务端直出<div hidden></div>时，若没配[hidden] { display: none !important; }，浏览器可能先渲染再隐藏，造成 FOVC（Flash of Visible Content）。这不是 bug，是规范允许的行为——因为hidden依赖 UA 样式表注入时机。
真正“解析即隐藏”的唯一办法是内联：<div hidden style="display: none"></div>。它在 HTML 解析阶段就被 parser 读取，比任何外部 CSS 都早。
关于动画：
-
transition: display无效，@keyframes里也不能控制hidden状态 - 要做淡入/高度过渡，得用
opacity或max-height配合 CSS 类，最后用el.hidden = true收尾 - 别同时写
hidden和aria-hidden="true"——前者已让子树退出可访问性树，后者冗余且易冲突
