覆盖 html 中的可见性

Question

我尝试编写一些 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 代码中的 "hidden" 吗？已经写入的内容不会改变任何内容。

Answer 1

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

h1.my_class {
    display:block;
}

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

Answer 2

h1.my_class {
    display: inline;
}

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

Answer 3

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

因此，如果您只是将 CSS 更改为：

h1.my_class {
  display: block;
}

就可以了，这里也不用!important了。如果你想试验一下，这里有一个 fiddle：https://jsfiddle.net/27q7d157/

Answer 4

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

display: block

或

display: inline

但我必须使用

visibility: visible

也是。

对于文本或图像，"display" 即可。但更像是隐藏 div 内的隐藏跨度，我还必须使用

visibility:visible

覆盖 html 中的可见性

Override visibility in html

html

css

visibility