当 parent 设置为 display:none 时强制 html 元素可见

【问题标题】：Force an html element to be visible when parent is set to display:none当 parent 设置为 display:none 时强制 html 元素可见
【发布时间】：2020-07-08 09:13:31
【问题描述】：

当一个父元素被设置为display:none;，我们如何才能让它的一个后代可见？

css:
div: display:none;

html:
<div>
  <p id='required'>required</p>
  <p>not required</p>
</div>

如何让p#required 单独可见。

限制 - 我将在手写笔浏览器扩展中使用它。

【问题讨论】：

如果父元素被隐藏，它的子元素都不能显示

标签： html css browser userstyles

【解决方案1】：

您可以使用visibility 属性而不是display 来执行此操作。

下面的示例代码

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style type="text/css">
        div {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div>
      <p id='required'>required</p>
      <p style="visibility: visible;">not required</p>
    </div>
</body>
</html>

【讨论】：