0

一定量のdivクラス「ボックス」が隣り合って浮かんでいます。4n+1 番目の div ごとに、nth-child(4n+1) セレクターを使用して境界線から離れた場所にプッシュする追加の左マージンがあります。無限の量の div クラス「ボックス」が存在する可能性があります。

問題は、div クラス "special" が 4n 番目の要素の後に動的に追加される場合があることです。もちろん、これにより、次のボックス div が必要な位置を失います。それで、私は成功せずにnth-of-typeを試しました。

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="special"></div>
<div class="box"></div>

n番目の子のCSS:

 .box:nth-child(4n+1){
  margin-left:25px;   
}

私は nth-child および nth-of-type セレクターにあまり慣れていないためです。だから私は何かを見落としていると確信しています。各 4n+1 ボックス div にクラスを追加することはできません。CSS ソリューションを探しています

「特別な」div を使用しない例

「特別な」div の例

編集：まだ提供されている答えは、特別なdivの後に1行を解決することができました。しかし、まだ 複数あります。 「特別」の後の複数行の例

可能な限りブラウザの互換性を期待しています。

4

2 に答える 2

2

どうですか

.special + .box, 
.box:nth-child(4n+1) {
    margin-left:25px;
}

デモ: http://jsfiddle.net/VdJmC/6/

変えたら

<div class="special"></div>

他の何かに

<p class="special"></p>

次に、次のコードはまさにあなたが望むことを行います（IE8までは機能しません）

.special + .box, 
.box:nth-of-type(4n+1) {
    margin-left:25px;
}

デモ - http://jsfiddle.net/VdJmC/11/

于 2013-07-11T16:15:09.563 に答える
1

代わりに使用

div > .box:first-child, 
.special + .box {
     margin-left:25px;   
}

よりも少し古いスタイルですがnth-*、IE7

于 2013-07-11T16:14:59.870 に答える