应全局添加[hidden] { display: none !important; }并确保选择器匹配，避免通配符重置display，注意scoped样式、Shadow DOM隔离及框架兼容性，JS操作需用removeAttribute或.hidden=false。
hidden属性被CSS display覆盖怎么办
hidden 属性不是 CSS 属性，它触发的是浏览器内置的语义化隐藏逻辑，默认行为是给 [hidden] 加 display: none。但这个默认可以被 CSS 覆盖——一旦你或第三方框架写了 div { display: block } 或 .ant-btn { display: inline-flex }，hidden 就会“失效”，元素照常显示。
这不是 bug，是规范允许的行为。解决的关键不是对抗 CSS，而是主动兜底：
- 在全局 CSS 最早位置（比如 reset.css 后、框架前）加一条：
[hidden] { display: none !important; } - 避免用通配符或高权类名重置所有块级元素的
display，比如不要写div, section, article { display: block; } - 检查框架是否已注入类似
.ant-btn[hidden] { display: none; }的规则——若没有，就得自己补
为什么加了 [hidden] { display: none } 还没用
常见原因是选择器根本没匹配上。比如你写了 div[hidden]，但实际 DOM 是 <section hidden></section>，那这条规则就完全不生效。
更隐蔽的是 scoped 样式或 Shadow DOM 场景：
立即学习“前端免费学习笔记（深入）”；
- Vue 单文件组件里，
<style scoped>编译后会加[data-v-xxx]属性，而[hidden]选择器没带这个，自然不匹配 - Shadow DOM 内部样式完全隔离，外部写的
[hidden]规则进不去 - 某些 UI 库（如 Element Plus）对
[hidden]做了特殊处理，但只覆盖部分组件，<div hidden>可能漏掉
验证方法：打开开发者工具，在 Elements 面板里右键目标元素 →「Force state」→ 勾选 :hover 看样式是否出现；或直接在 Styles 面板搜索 [hidden]，确认规则是否存在且未被划掉。
JS 动态控制 hidden 时的三个典型坑
用 JS 切换 hidden 表面简单，但实操中容易出错：
- 误用
element.setAttribute('hidden', 'false')—— 这会新增一个值为字符串"false"的hidden属性，浏览器仍视其为真，元素继续隐藏。正确写法是element.removeAttribute('hidden')或element.hidden = false - SSR 页面中，服务端已渲染
<div hidden>，客户端 JS 执行el.hidden = false前存在视觉闪动。可配合opacity: 0+transition缓解，或用data-hydrated控制初始状态 -
<input hidden>在表单提交时会被忽略，这是 HTML 规范行为。需要提交该字段，就别用hidden，改用position: absolute; left: -9999px或clip-path: inset(100%)
和 overflow: hidden 混用时的意外表现
两者目的不同，但叠加使用可能互相干扰：
-
overflow: hidden是布局层裁剪，hidden是语义层移除。如果父元素同时设了overflow: hidden和[hidden]，后者优先级更高，整个元素不渲染，overflow失去作用对象 - 子元素用了
position: absolute，父元素仅靠hidden可以隐藏它，但若父元素只设overflow: hidden且没设position: relative，绝对定位子元素会溢出 - 移动端 Safari 中，
body[hidden]可能导致页面白屏或滚动异常，建议避免对<body>直接用hidden，改用 class 控制显隐
真正难处理的不是单一属性失效，而是 hidden 和框架样式、JS hydration、无障碍需求三者交叠时的边界情况——比如屏幕阅读器要读，但视觉不能见，此时 hidden 正确，visibility: hidden 错误，display: none 也不行。得留心这些细节，而不是只盯着 CSS 是否生效。
