Question

所以我一直认为如果父容器有一个属性集，它会取代孩子。所以在我的情况下，我希望隐藏父容器，但子元素具有可见的可见性。但似乎子元素可见性属性取代父母，因此仍将显示。

但是，如果使用显示属性，它会以我想要的方式工作。这是html：

<div class="wrap">
    <a href="">title</a>
</div>

<div class="wrap2">
    <a href="">title2</a>
</div>

CSS：

.wrap { visibility:hidden; }
.wrap a { visibility:visible; }

.wrap2 { display:none; }
.wrap2 a { display:block; }

http://jsfiddle.net/yPXtB/

所以我想要的是隐藏容器，如果我将可见性设置为隐藏，即使子元素可见也是如此。

Answer 1

另一种解决方法是使用值{0和1而不是opacity的{{1}}。

（如果重要的话，请查看http://caniuse.com/#search=opacity与旧版浏览器的兼容性）

Answer 2

如果您需要子css具有可见性：可见，那么您不能简单地将父级设置为隐藏，因为父级不会覆盖该子级。

您还需要将每个孩子设置为隐藏，或者将孩子再次包裹在另一个具有可见性的div中：可见，并将其切换为隐藏而不是父项，即：

<div class="hiddenwrap">
    <div class="visiblewrap"> /* toggle this instead */
        /* content without visibility properties */
    </div>
</div>

.hiddenwrap { visibility:hidden; }
.visiblewrap { visibility:visible; }

Answer 3

visibility: hidden会导致元素不被绘制，但它仍然存在，甚至它占据的空间也会被占用。页面流不受影响。因此，仍有可能将孩子吸引到那个空间。

如果您没有明确指定，则子项确实会使用父级的可见性，如您所见：http://jsfiddle.net/yPXtB/2/

display: none不仅隐藏了元素，还将其从页面流中移除。显示会影响元素的行为方式并改变流程。没有更多的空间来吸引孩子。

嵌套时任何使CSS可见性工作的方法？

3 个答案: