selektor pierwszego dziecka nie działa

Question

Próbuję zbudować prosty system pudełkowy i muszę usunąć prawy margines pierwszego dziecka.

Próbowałem zarówno first-child i first-of-type i nadal nie można prawidłowo cel zamierzony klasę.

Przeczytałem wiele różnych przykładów i nadal nie mogę znaleźć rozwiązania.

Proszę zobaczyć ten fiddle i pomóż mi usunąć margines po lewej stronie od pierwszego dziecka.

.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

Pierwszy element klasy .half nie jest pierwszym dzieckiem z .container. To drugie dziecko, więc twój selektor nie działa.

Sugerowałbym użyciu

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

aby określić, że każdy .box.half nadchodzi natychmiast po .box.full mieć margines pragnienie.

Answer 2

Jesteś targetting drugie dziecko rzeczywiście:

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

Spróbuj zamiast :)

.box.half { 
    width: 49%; 
} 

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

.box.half TYLKO jeśli poprzedzone .box.half będzie miał margin-left: 2%.

Koniec z lewym marginesem, bez prawego marginesu, 49 + 49 + 2 = 100, zysk.

Patrz Twój Fiddle aktualizacja: http://jsfiddle.net/Lvd44upd/3/

Answer 3

użyłem

.box.half { width: 49%; } 

i

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

. Wydaje się pracować here.

Answer 4

To dlatego, że pole pierwszej połowy nie jest pierwszym dzieckiem rodzica, jest to drugie. Tak szybkie rozwiązanie to .box.half: nth-child (2).