2

いくつかのサムネイルを表示したい幅680ピクセルのdivがあります。各親指の幅は64ピクセルで、間に24ピクセルのマージンがあります。次に、8 * 64 + 7 * 24 =680です。ただし、8番目の親指もそのマージンを適用するため、680ピクセル（8 *（64 + 24）= 704）内に収まりません。

8つおきの親指のマージンを手動で0に設定して修正しましたが、CSSがこれを適切に処理できるかどうか疑問に思いました。

これがコードです。

4

3 に答える 3

2

n番目の子セレクターを使用できます。

img:nth-child(8n) { margin:0 }

ここで言っているのは、「8番目のimg要素ごとに、0のマージンを適用することです。

これが更新されたコードです-インラインCSSも削除しました。

これはすべてのブラウザでサポートされているわけではないことに注意してください。

于 2013-02-01T07:19:23.650 に答える
1

使用するimg:nth-child(8n)のは正解ですが、<div>周囲の親指をもう1つ作成margin: 12px 0し、8番目の子（この場合は8番目のimg要素）ごとに適用する場合にのみ機能します。

重要なのは、8番目のimg要素ごとに適用されるわけではないということです。このセレクターは、である8番目ごとの子要素を選択しています。微妙ですが重要な違いがあります。img

つまり、コンテナ内に1つの段落と画像のリストがある場合、8番目の画像はnth-child(8n)8番目の子ではないため、img：selectorでは選択されません。その場合、7番目のimgは8番目の子になるため、選択されます。これが例です。

于 2013-02-01T08:22:39.043 に答える