使用JS hidden属性隐藏元素遇CSS display:block失效问题咨询

hidden 属性的作用 #

HTML5的hidden是布尔属性，核心作用就是标记元素「无需显示」。浏览器默认会给带有该属性的元素应用display: none样式，让元素彻底从页面布局中消失——既不可见，也不占据空间。

为什么CSS display:block会让hidden失效？ #

本质是CSS优先级的问题：

• 浏览器针对hidden属性的默认样式属于「用户代理样式」（浏览器自带的基础样式），优先级极低。
• 你写的#myid { display: block; }是ID选择器样式，优先级远高于用户代理样式，会直接覆盖浏览器为hidden设置的display:none，导致元素依然显示。
  说白了：JS确实成功给元素加上了hidden属性，但你的CSS把隐藏效果给冲掉了。

这是不是Bug？ #

不是Bug，完全符合CSS优先级规则，而且是hidden属性的设计初衷——它提供的是基础隐藏能力，但允许开发者用更高优先级的CSS覆盖它，保留灵活调整的空间。

解决方法 #

两种常用方案：

1. 用属性选择器提升hidden对应样式的优先级：

#myid[hidden] {
  display: none !important;
}

2. 直接在JS里修改元素行内样式，绕开hidden属性：

document.getElementById('myid').style.display = 'none';

内容的提问来源于stack exchange，提问作者MArt