覆盖html中的可见性答案

【问题标题】：Override visibility in html覆盖html中的可见性
【发布时间】：2018-07-01 00:32:16
【问题描述】：

我尝试编写一些 CSS 代码。不幸的是，我无法更改 html 代码，只有样式部分。在我的项目中，我在 css 文件中有样式。这是一些代码：

<!DOCTYPE html>
<html>
<head>
<style>
h1.my_class {
    visibility: visible !important;
}
</style>
</head>
<body>

<h1 class="my_class" hidden>This is a heading</h1>

</body>
</html>

我可以用我的 css 代码覆盖用 html 代码编写的“隐藏”吗？已经写的东西不会改变任何东西。

【问题讨论】：

如果要显示，是否应该在元素上设置隐藏属性？ - developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…: 隐藏的全局属性是一个布尔属性，表示该元素尚未或不再相关。 hidden 属性不得用于隐藏可以在另一个演示文稿中合法显示的内容

标签： html css visibility

【解决方案1】：

嗯，我尝试了你的想法。我可以使用

display: block

或

display: inline

但我必须使用

visibility: visible

也是。

对于文本或图像，“显示”就很好。但是对于更像是隐藏 div 内的隐藏跨度，我还必须使用

visibility:visible

【讨论】：

【解决方案2】：

我想知道如果元素本来应该用 CSS 显示，为什么它会隐藏在 HTML 中？当然，HTML 标记可能来自其他来源，您无法控制它。

所以如果你只是把你的 CSS 改成这样：

h1.my_class {
  display: block;
}

这样就可以了，这里也不需要使用!important。如果您想尝试一下，这里有一个小提琴：https://jsfiddle.net/27q7d157/

【讨论】：

【解决方案3】：

h1.my_class {
    display: inline;
}

试试这个而不是你写的，它应该可以工作。

【讨论】：

【解决方案4】：

使用 display:block 代替可见性。请看下面的代码

h1.my_class {
    display:block;
}

&lt;h1 class="my_class" hidden&gt;This is a heading&lt;/h1&gt;

【讨论】：