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ため、スタイルが一致しなくなったためです。

動的に挿入された要素にも classnSubがある場合、ルールは引き続き一致し、新しく挿入された要素 (現在は最初の子) に一致します。

私は CSS3 の専門家ではありませんが、:nth-of-typeセレクターを試すことができます。

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

PatrikAkerstrand が一致しなくなったルールについて言ったことは正しいです。:first-child 疑似 (残念ながら) は、指定した要素/クラス/ものも持つ親の最初の子のみをターゲットにします。

以下が機能しない理由を30分罵倒しました

<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 に答える
0

これは、この挿入された要素のクラスを設定していないためだと思います...

あなたのCSSファイルでは、「.nSub:first-child」と言っていますが、挿入している要素はそのクラスのものではありません: "

その要素に class-attribute も追加すると、役立つかもしれません。

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