css - :first-child fails when an element of a different class is dynamically inserted above

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 */
}