给父元素与子元素分别设置visibility注意点

最新推荐文章于 2022-07-21 15:46:07 发布

weixin_30701521

最新推荐文章于 2022-07-21 15:46:07 发布

阅读量389

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yaoyao-sun/p/7111244.html

本文探讨了CSS中使用visibility属性控制元素可见性的特殊情况，即当父元素被设置为hidden时，若子元素显式设置为visible，则子元素仍可见。通过实例代码展示了这一现象，并强调了深入理解CSS特性的必要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于机顶盒的终端特性原因，不能用display：hidden去做隐藏，就选择了visibility：hidden。

在这里遇到一个现象：

给父元素设置了hidden，但是里面的子元素依然可见。以为只是盒子特性导致渲染出来和浏览器的不一样。

但是后来在做终端特性库的时候在浏览器上单独写了dome测试这个属性，发现父元素设置visibility：hidden，里面的子元素也不见了。

比较之前的项目的代码，找到原因了：

父元素设置hidden的同时，给子元素设置了visibility：visible。结果仅仅只是父元素隐藏了，但是子元素依然是可见的。

简单的测试代码记录下：给父元素设置了边框，子元素黄色背景

.con{
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      visibility: hidden;
    }
    .v-1
    {
      width: 20px;
      height: 20px;
      background-color: yellow;
      float: left;
      margin-right: 10px;
      visibility: visible;
    }
  </style>
</head>
<body>
<div class="con">
  <div class="v-1"></div>
  <div class="v-1"></div>
  <div class="v-1"></div>
</div>