hidden 是 HTML 原生布尔属性，通过添加 hidden="" 实现隐藏，但其优先级低于显式设置的 display: block 等 CSS 规则；它并非直接控制 display，而是等效于 visibility: hidden + display: none 的组合行为，但可被更高权重的 CSS 覆盖。
`hidden` 是 html 原生布尔属性，通过添加 `hidden=""` 实现隐藏，但其优先级低于显式设置的 `display: block` 等 css 规则；它并非直接控制 `display`，而是等效于 `visibility: hidden` + `display: none` 的组合行为，但可被更高权重的 css 覆盖。
hidden 属性是 HTML5 引入的语义化隐藏机制，其规范行为等价于同时应用以下 CSS 样式：
[hidden] {
display: none !important;
}
注意：!important 是规范强制要求，意味着浏览器必须将 hidden 视为具有最高层叠优先级的 display: none 声明。但关键前提是：该样式未被更具体的 CSS 规则（如 #myid { display: block; }）以 !important 形式覆盖。
在你的示例中：
#myid {
display: block; /* 无 !important，本应被 [hidden] 覆盖 */
}
理论上，标准浏览器应遵循规范，使 hidden 生效。但实际中部分旧版浏览器或特定上下文（如 Shadow DOM、CSS 框架重置规则）可能导致兼容性偏差。更常见的情况是：开发者误以为 hidden 与 visibility: hidden 完全等价，而忽略了它本质是 display 控制机制。
✅ 正确理解：
-
hidden=true→ 元素从渲染树中移除（不可见、不占布局空间、不可聚焦、不触达辅助技术）； -
visibility: hidden→ 元素仍占布局空间，仅视觉隐藏，且仍可聚焦、可被屏幕阅读器读取（除非额外加aria-hidden="true"）； -
display: block显式声明会与hidden的display: none冲突——若 CSS 权重更高（如 ID 选择器 +!important），则hidden失效。
? 推荐解决方案：
方案一：优先使用原生 hidden（推荐）
确保无高权重 CSS 覆盖 display，并移除冲突规则：
/* ❌ 错误：强行锁定 display */
#myid { display: block; }
/* ✅ 正确：让 hidden 自主生效 */
#myid { /* 不强制 display */ }
JS 使用简洁可靠：
const el = document.getElementById('myid');
el.hidden = true; // 立即隐藏，语义清晰，无障碍友好
el.hidden = false; // 恢复显示
方案二：CSS 类控制（适合复杂样式场景）
当需精细控制过渡动画、响应式状态等时，用类名更灵活：
.toggle-hidden {
display: none;
}
.toggle-visible {
display: block;
}
/* 或使用 visibility（保留占位） */
.toggle-invisible {
visibility: hidden;
opacity: 0;
}
const el = document.getElementById('myid');
el.classList.toggle('toggle-hidden');
// 或统一管理：
el.classList.toggle('toggle-hidden', shouldHide);
⚠️ 注意事项：
- 避免混合使用
hidden和style.display—— 后者会内联覆盖hidden； -
hidden具有无障碍语义（自动触发aria-hidden="true"），比纯 CSS 隐藏更符合可访问性标准； - 若必须保留
display: block（如重置框架影响），可在 JS 中临时清除内联样式：el.style.display = '';再设el.hidden = true。
总结：hidden 并非“无用”，而是设计为语义优先、无障碍友好的隐藏机制。其失效往往源于 CSS 权重冲突或误解其作用原理。坚持“语义化优先、样式解耦”原则，才能真正发挥其价值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
