ファーストチャイルドセレクタが動作しない

Question

シンプルなボックスシステムを構築しようとしています。最初の子の右マージンを削除する必要があります。

私は第一子との型-最初に、まだ適切に意図されたクラスをターゲットにすることはできません両方を試してみました。

私は数多くの異なる例を読んだが、解決策を見つけることはできません。

このfiddleを参照して、最初の子から余白を削除してください。

.container { 
    position: relative; 
    width: 100%; 
    max-width: 960px; 
    margin: 0 auto; 
    padding: 0 20px; 
    box-sizing: border-box; 
    background-color: black; 
} 

.box { 
    margin: 1% 0 1% 0; 
    float: left; 
    background-color: gray; 
    box-sizing: border-box; 
    color:white; 
} 
.box.full { 
    width: 100%; 
    margin-left: 0; 
} 

.box.half { 
    width: 49%; 
    margin-left: 1%; 
} 

.half:first-child { 
    margin-left: 0; 
} 

Answer 1

最初の.halfクラス要素は.containerの最初の子ではありません。 2番目の子です。したがって、セレクタは機能しません。

私は.box.fullは、あなたが望む余裕を持った後、任意の.box.halfがすぐに来ていることを指定するには、

.box.full + .box.half { 
    margin-left: 0; 
} 

を使用してお勧めします。

Answer 2

あなたは確かに第二子を標的にされています

.box.half:nth-child(2) { 
    margin-left: 0; 
} 

は、代わりにこれを試してみてください:)

.box.half { 
    width: 49%; 
} 

.box.half + .box.half 
{ 
    margin-left: 2%; 
} 

.box.halfを.box.halfが付け加え場合にのみmargin-left: 2%を持つことになります。

左余白がなくなり、右余白がなくなり、49 + 49 + 2 = 100、利益が得られます。

あなたのフィドルが更新を参照してください：http://jsfiddle.net/Lvd44upd/3/

Answer 3

私は

.box.half { width: 49%; } 

と

.box.half:last-child { margin-left: 1%; } 

を使用。仕事をしているようですhere。

Answer 4

これは、前半のボックスが親の最初の子ではないため、2番目のボックスです。だから簡単な解決策は.box.half：nth-​​child（2）です。