css - 在 960gs 的 CSS 中定位非直接父级

Question

我正在使用 Nathan Smith (www.960.gs) 的 Grid960 框架，并且已经使用了一段时间。在我的网站上，我通常让输入栏占据它们所在的网格容器的 100%。

但是，我也经常嵌套网格 div。这是一个例子:

<div class="grid_8">
   <div class="grid_4 alpha">
       random crap here
   </div>
   <div class="grid_4 omega">
       input boxes here
   </div>
</div>

我希望在我的样式表中有一个位置，我可以在 grid_4 中定位一个 input[type="text"]，但是如果我尝试这样做:

.grid_8 input[type="text"] {
   width: 610px;
}

.grid_4 input[type="text"] {
   width: 270px;
}

它仍然是 610 像素宽，即使 grid_4 更接近。有人想过如何解决这样的问题吗？

由于边距/边框/填充，我不能只使用百分比。

Answer 1

我同意 BoltClock 的评论。如果您经常嵌套网格，请确保您的 CSS 顺序实际上如您所示，较小的网格 在 CSS 中较大的网格定义之后(我假设您永远不会将较大的网格嵌套在较小的网格中) .

Note the cascading order difference here that causes a width difference .