html - 当 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）：

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

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

score 0 · Accepted Answer

在不工作的小提琴中，<div>使用的是容器包装器id中的最后两个s。<div>所以他们既不是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 ”。

1 回答 1