html - CSS:相同的 div，2 种不同的样式(针对不同的子 div)

Question

我有一个分区。在这个 div 里面有 2 个较小的 div。我希望其中一个较小的 div 具有 overflow:visible，而另一个具有 overflow:hidden。无法弄清楚是什么选择器允许我这样做，我想我错过了一些非常简单的东西。

编辑 抱歉，让我换个说法:我希望主 div 的样式 overflow:visible 只应用于其中一个子 div，而主 div也有样式 overflow:hidden 适用于其他。

示例:

http://jsfiddle.net/3fQBt/

<div id="body">
  <div id="visible">This div should be visible.</div>
  <div id="hidden">This div should be hidden.</div>
</div>

#body{
  width:300px;
  height:300px;
  margin:20px;
  position:relative;
  float:left;
  overflow:visible;
}

#visible{
  width:100%;
  height:100px;
  margin-left:-20px; //this should overflow visibly
  position:relative;
  float:left;
}

#hidden{
  width:100%;
  height:100px;
  margin-left:-20px; //this should be hidden
  position:relative;
  float:left;
}

Answer 1

像这样的事情应该会让你朝着正确的方向前进。

<div id="body">
 <div id="visible">This div should overflow.</div>
 <div id="hidden-box">
  <div id="hidden">This div shouldn't.</div>
 </div>
</div>


#hidden-box {position:relative;overflow:hidden;height:100%;width:100%;}