Selettore primo figlio non funzionante

Question

Sto provando a creare un semplice sistema di riquadri e devo rimuovere il margine destro del primo figlio.

Ho provato sia first-child e primo nel tipo e ancora non è possibile correttamente indirizzare la classe prevista.

Ho letto numerosi esempi diversi e non riesco ancora a trovare una soluzione.

Si prega di vedere questo fiddle e aiutarmi a rimuovere il margine sinistro dal primo figlio.

.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

Il primo elemento di classe .half non è il primo figlio di .container. È il secondo figlio, quindi il tuo selezionatore non funziona.

Io suggerirei di usare

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

per specificare che qualsiasi .box.half venendo subito dopo un .box.full hanno il margine che desiderate.

Answer 2

ci si rivolge il secondo figlio infatti:

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

Prova a modificare :)

.box.half { 
    width: 49%; 
} 

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

.box.half SOLO se preceduta da .box.half avrà margin-left: 2%.

Non più margine sinistro, non più margine destro, 49 + 49 + 2 = 100, profitto.

vedere il tuo violino aggiornamento: http://jsfiddle.net/Lvd44upd/3/

Answer 3

ho usato

.box.half { width: 49%; } 

e

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

. Sembra funzionare here.

Answer 4

Perché la prima metà del riquadro non è il primo figlio del suo genitore, è il secondo. La soluzione così rapida è .box.half: nth-child (2).