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

Question

我有一个div。这个 div 里面有 2 个较小的 div。我希望较小的 div 之一具有 overflow:visible，而另一个具有 overflow:hidden。无法弄清楚哪些选择器允许我执行此操作，我认为我错过了一些 super 简单的东西。

编辑 抱歉，让我重新表述一下:我希望主 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%;}