css - 嵌套时有什么方法可以使 CSS 可见性起作用？

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 而不是 visibility。

(尽管检查 http://caniuse.com/#search=opacity 是否与太旧的浏览器兼容很重要)