html - 当 div 在其他 div 下时，第 n 个 child 不工作

Question

我有一系列向左浮动的 div，然后我在这些也向左浮动的 div 下有不同名称的 div。 nth-child 代码对这些 div 不起作用，这些 div 位于其他 float 的左侧 div 下方。但是当他们高于他们时，第 n 个 child 工作正常。我试过:

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

同样，这仅在 div 高于其他 div 时有效，而当 div 在下方时无效。

这里有两个 jfiddles 演示第 n 个 child 何时工作，以及何时不工作..

您将看到一系列白色 div，然后是两个红色 div。我正在使用第 nth-child 给两个红色 div 留出 100px 的 margin-left。

当第 nth-child 不起作用时(div 低于 其他 div):

http://jsfiddle.net/hsQQn/

当 nth-child 工作时(div 高于 其他 div):

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

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

Answer 1

在 不 工作的 fiddle 中 <div>使用 id是最后两个<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>

当然你可以像这样引用元素的子元素，例如:

#myid > a {}

为此:

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

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