纯CSS。子元素的可见性取决于父类。可能吗?

时间:2013-11-18 07:07:00

标签: css visibility

我可以通过纯CSS 来实现这种行为: 如果父块具有“隐藏”类,则具有“a”类的子元素必须是不可见的

实施例

<div class="parent">
    <div class="a"></div>   //  Visible
    <div class="b"></div>   //  Visible
</div>

<div class="parent hidden">
    <div class="a"></div>   //  Invisible
    <div class="b"></div>   //  Visible
</div>

6 个答案:

答案 0 :(得分:2)

试试这个

 .parent.hidden .a 
 {
   ///display: none;
 }

注意:

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there

答案 1 :(得分:1)

就像这样:

.parent.hidden .a { display: none; }

请注意.parent.hidden之间没有空格。

答案 2 :(得分:1)

是的,这是可能的。

试试这个:

.parent.hidden .a{visibility:hidden;}

DEMO.

答案 3 :(得分:1)

是的,你可以。

将以下内容添加到您的CSS中。

   div.parent.hidden .a{visibililty:hidden;}

希望这有帮助。

答案 4 :(得分:1)

只需使用普通的上下文选择器:

.hidden .a { visibility: hidden; }

如果你真的想要从渲染中删除元素,而不是让它不可见(一个相当不同的东西),那么你将使用.hidden .a { display: none; }

然而,对于一个本身并不隐藏的元素,使用类名hidden是不合逻辑的(对于阅读HTML源代码的人来说)。像hidelinks这样的名字可能更好。

答案 5 :(得分:1)

试试这个

.parent .a,.hidden .a {visibility:hidden;}