2

因此，我遇到了一种情况，即插入不同类/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>
4

3 回答 3

2

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

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

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

.nSub:nth-of-type(1) {
   /* Rules for the first .nSub here */
}
于 2010-06-18T08:15:47.837 回答
0

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

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

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

$('nav').insert({top:'<div id="newWF" class="nSub"></div>'});
于 2010-06-18T08:15:52.877 回答
0

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 不支持此功能。

于 2011-03-19T01:15:59.370 回答