当父元素为Display:none时显示HTML子元素

当其父元素为display:none时，是否存在显示子元素的机制

这种情况是隐藏选项卡上的验证错误。我想显示错误消息，即使字段是隐藏的

这里有一个非常简单的情况

标记：

<ul>
    <li>One</li>
    <li class="hide">
        Two
        <ul>
            <li class="reshow">Re Show Me</li>
            <li>Inner 2</li>
        </ul>
    </li>
    <li>Three</li>
</ul>

---

我猜这是不可能的，因为孩子没有上下文，但以防万一？？？

不，这是不可能的<代码>显示：无隐藏元素，因此不会显示任何子元素

编辑：

如果您能够从使用

display

切换到

visibility

，那么这可能就是您想要的

.hide {visibility: hidden;}
.reshow {visibility: visible;}

使用此方法可以隐藏父元素的内容，但显示所需的特定

。唯一需要注意的是，父标记仍将占用屏幕空间。只是不会显示给用户。这可能会也可能不会破坏您正在寻找的布局

---

不，这是不可能的。您可以将子元素移出其隐藏的父元素，并将其插入标记中的其他位置（例如，通过JavaScript）。

您可以使用display:none；要隐藏元素，请通过位置将其移出视口：相对/绝对；左：-9999em； 然后给可见的子对象一个位置：相对；左：9999em

此解决方案的缺点是，如果使用position:absolute，则“reshown”元素不在元素流中。（不占用所需空间，不向下推下列元件） 或者在使用position:relative时，您占用的空间比实际需要的多

---

对于特定情况，您可以使用以下任一方法：

.hidden-container *{display:none;}
.hidden-container .show-again{display:block}

这将保持

.hidden container

显示，但除

之外的所有内容都将再次显示

container的显示属性设置为

无

编辑：

请注意，如果在

.hidden container

的子对象的样式后声明，它将重置这些子对象中的所有显示属性。

只需添加.hide：

font-size: 0;
margin: 0;
padding: 0;

---

它不会占用空间，就像display none一样

您也可以使用jQuery隐藏和显示元素。 看看这个例子：

---

我就是这么想的……我只是希望我不必走那条路。验证消息是在客户端生成的，因此，我需要连接到某个事件来触发此消息……我已经在考虑这些问题了。@Andih Ok-我已经用另一种解决方案更新了答案，该解决方案使用了

可见性

，而不是

显示

CSS属性。很抱歉，这个答案有误导性，因为它只在没有子元素嵌套的情况下才有效。它只适用于隐藏元素的兄弟元素，否则就不起作用：虽然我喜欢这个答案，但我听说在CSS中使用*确实会降低移动浏览器的速度。我想知道使用它作为依赖项的效果如何？这非常有效，但前提是要隐藏的元素是文本。

.hidden-container *{display:none;}
.hidden-container .show-again{display:block}

font-size: 0;
margin: 0;
padding: 0;