使用display:flex时如何通过[hidden]属性隐藏DOM元素

问题根因 #

浏览器默认样式表中[hidden]属性的原生规则为属性选择器级别，定义如下：

[hidden] {
  display: none;
}

你为h1设置的.h1 { display: flex; }属于类选择器，优先级与属性选择器相同，且类样式的加载顺序在浏览器默认样式之后，因此会覆盖[hidden]的display: none规则，导致隐藏效果失效。

可行解决方案 #

可以同时满足你两个需求，推荐以下两种适配方案： #

方案1：全局提升[hidden]优先级（通用推荐）

在项目全局样式文件中加入以下规则，让[hidden]的隐藏规则优先级高于所有普通display定义：

[hidden] {
  display: none !important;
}

该方案改动极小，无需修改现有业务代码，全局所有使用[hidden]语法的元素都会正常生效，元素显示时原有的display: flex属性也能正常生效。 #

方案2：针对当前元素单独适配（无全局污染）

如果不想修改全局样式规则，仅需为当前h1元素新增组合样式规则即可：

.h1[hidden] {
  display: none !important;
}

该方案只会影响类名为h1的元素的hidden效果，不会干扰项目其他位置的hidden属性逻辑。

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