当 div 在其他 div 下时，nth-child 不工作

Question

我有一系列向左浮动的 div，然后我在这些也向左浮动的 div 下有不同名称的 div。 nth-child 代码不适用于这些 div 放置在其他浮动左 div 下方。但是当它们高于它们时，第 n 个孩子工作正常。我试过了：

#div:first-child and #div:nth-child(1)

同样，这仅在 div 高于其他 div 时有效，当 div 低于其他 div 时不起作用。

这里有两个 jfiddles 演示了 nth-child 什么时候可以工作，什么时候不可以......

您将看到一系列白色 div，然后是两个红色 div。我正在使用 nth-child 为两个红色 div 提供 100px 的左侧边距。

当 nth-child 不起作用时（div 低于其他 div）：

http://jsfiddle.net/hsQQn/

当 nth-child 工作时（div 高于其他 div）：

http://jsfiddle.net/hsQQn/1/

我想让这个工作，以便当 div 低于其他 div 时 nth-child 工作。在这一点上，我不知道为什么它不工作......任何帮助将不胜感激:)

Answer 1

不使用<div>s 工作的小提琴是容器包装器中的最后两个<div>s。所以它们既不是first-child 也不是nth-child(2) 的wrapper。它们更有可能是其父包装元素的nth-child(17) 和nth-child(18)。

您还有无效的 HTML。每个 id 都应该是唯一的。您应该改用 CSS 类：

div.myclass {}

可以像这样多次使用：

<div class="myclass"></div>

另一方面，ID：

#myid {}

可以一次性使用：

<div id="myid"></div>

当然，您可以使用 id 引用元素的子元素，例如：

#myid > a {}

为此：

<div id="myid"><a></a></div>

但仍然只有一个元素使用id“myid”。