:first-child 在上面动态插入不同类的元素时失败

Question

所以，我遇到过这样的情况：插入不同类/id 的元素会破坏该 :first-child 上的所有 css 规则。

<div id="nav">
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
</div>


.nSub:first-child { margin-top:15px; -moz-border-radius-topleft:5px; /* ... */ }
.nSub             { background:#666; /* ... */ }
.nSub:last-child  { -moz-border-radius-bottomleft:5px; /* ... */ }

一旦我插入上面另一个类/id 的元素，如下所示：

$('nav').insert({top:'<div id="newWF"></div>'});

.nSub:first-child 的所有声明在 FF 3.6 和 Safari 4 中都将被忽略。

编辑： 抱歉，如果我没有说清楚：上面插入的元素应该没有类名“.nSub”

<div id="nav">
    <div id="newWF"></div>
    <div class="nSub">abcdef</div> <!-- BROKEN CSS -->
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
    <div class="nSub">abcdef</div>
</div>

Answer 1

这是因为第一个具有 nSub 类的元素不再是父元素的 first-child，因此样式不再匹配。

如果动态插入的元素也具有类 nSub，则规则仍然会匹配，并且会匹配新插入的元素（现在是第一个子元素）。

我不是 CSS3 专家，但你可以尝试 :nth-of-type 选择器：

.nSub:nth-of-type(1) {
   /* Rules for the first .nSub here */
}

Answer 2

这是因为，我猜你没有为这个插入的元素设置类......

在你的CSS文件中你说“.nSub：first-child”，但你插入的元素不属于该类：“

如果您也将类属性添加到该元素，也许会有所帮助：

$('nav').insert({top:'<div id="newWF" class="nSub"></div>'});

Answer 3

PatrikAkerstrand 关于规则不再匹配的说法是正确的。 :first-child 伪（不幸的是）仅针对其父级的第一个子级，该子级也具有元素/类/您指定的任何内容。

我只是花了半个小时咒骂为什么下面的方法不起作用

<div id="header">
  <a href="."><img src="path/file.png" /></a>
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>

#header .img {
  margin:0 25px;
}
#header .img:first-child,
#header .img:last-child {
  margin:0;
}

我发现解决方案是将 div.img 包装到 div.images 中，就像这样

<div id="header">
  <a href="."><img src="path/file.png" /></a>
  <div class="images">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
  </div>
</div>

#header .images .img {
  margin:0 25px;
}
#header .images .img:first-child,
#header .images .img:last-child {
  margin:0;
}

编辑：如果你不想要添加非语义解决方法标记，您可以使用 :first-of-type 伪类。但是，早期版本的 IE 不支持此功能。