家长的显示设置为无，但孩子仍然可见？

Question

我真的很困惑这个，我已将父.container显示设置为无，但#bottom-bar仍然可见。我不明白？一旦我对画布进行了排序，我想让整个.container可见，但在那之前孩子是可见的，这会毁掉它吗？

canvas {
  background: black;
}

.container {
  display: none;
}

.container {
  position: relative;
}

.container canvas,
#bottom-bar {
  position: absolute;
}

#bottom-bar {
  position: fixed;
}

<div class="container">
  <canvas id="game"></canvas>
  <div id="bottom-bar">
    <h1>HELLO</h1>
  </div>
</div>

Answer 1

如果将代码粘贴到编辑器中，CSS中会出现一个红色虚线点。

canvas {
  background: black;
}

/*  
​ <-- REMOVE THIS 
.container {
  display: none;
}*/


.container {
  display: none;
}

.container {
  position: relative;
}

.container canvas,
#bottom-bar {
  position: absolute;
}

#bottom-bar {
  position: fixed;
}

<div class="container">
  <canvas id="game"></canvas>
  <div id="bottom-bar">
    <h1>HELLO</h1>
  </div>
</div>