如何通过CSS覆盖HTML元素的hidden属性？无法修改HTML代码

嘿，我刚好碰到过这个问题！你用visibility: visible !important没生效的原因是——HTML的hidden属性本质上是把元素的display设为了none，而visibility和display是完全独立的CSS属性：visibility控制元素是否可见，但元素还是占着页面空间；display: none则是直接把元素从页面布局里移除了，所以光改visibility根本没用。

要搞定这个，你需要在CSS里覆盖display属性，具体有两种方法：

方法一：用!important强制覆盖 #

直接给目标元素设置display为它的默认值，再加上!important：

h1.my_class {
  display: block !important;
  /* visibility: visible !important; 这行其实可以省略，因为display不为none时元素就会显示 */
}

因为HTML的hidden自带的display: none优先级很高，必须用!important才能强制覆盖。

方法二：用属性选择器提高优先级（更规范） #

如果你不想用!important（毕竟它会让CSS优先级变得混乱，能不用就不用），可以用属性选择器来提升规则的优先级，这样不用!important也能生效：

h1.my_class[hidden] {
  display: block;
}

这个选择器同时匹配了类名和hidden属性，优先级比HTML自带的hidden规则高，所以能成功覆盖。

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