仅使用CSS为多个元素对设置显示的onhover行为 - 这是如何工作的？

Question

也许这是一个奇怪的问题，因为我不想知道'怎么'而是'为什么'，但我认为答案可能对那些希望了解css更好的方式的人有价值。

我正在尝试让我的页面上的每个div显示一个'x'div，它将允许用户关闭该div。有几个动态创建的div。

我有这个（动态）html：

<div class="box">
  <div class="x">X</div>
</div>
<div class="box">
  <div class="x">X</div>
</div>

['box'div的数量不同]

这个css：

.x {
  visibility: hidden;
}
.box:hover .x {
  visibility: visible;
}

我真的不认为这可行，但它确实有效：

jsFiddle

但是这个简单的css代码如何'知道'应该显示哪个x div，哪里没有id来区分'box'divs和'x'divs？

Answer 1

因为它寻找后代 .x 因此，当您将鼠标悬停在方框2上时，它会应用:hover，并且根据css规则，.x内.box的{​​{1}}应该可见。

真的不知道如何解释它：P