CSS div naprzemienny kolor

Question

Próbuję zebrać pasek moich divów na mojej stronie, brzmi to dość prosto, jednak odkryłem, że kiedy dodałem nagłówek pomiędzy wierszami moich div, wydaje się, że policzyłem nagłówek nieparzyste/nawet stylizacji

HTML

<div class="container"> 
    <h3>Title</h3> 
    <div class="row">Content</div> 
    <div class="row">Content</div> 
    <h3>Title</h3> 
    <div class="row">Content</div> 
    <div class="row">Content</div> 
    <div class="row">Content</div> 
    <h3>Title</h3> 
    <div class="row">Content</div> 
    <div class="row">Content</div> 
    <div class="row">Content</div> 
    <div class="row">Content</div> 
</div> 

CSS

.container { 
    width:600px; 
    margin:0 auto; 
} 

.row { 
    line-height:24pt; 
    border: solid 1px black; 
} 

.row:nth-child(odd) { 
    background: #e0e0e0; 
} 

h3 { 
    line-height:36pt; 
    font-weight:bold; 
    color:blue; 
} 

fiddle

Pomyślałbym, że kod już w skrzypcach zasadniczo zignoruje nagłówek i będzie pasował, ale wygląda na to, że traktuje nagłówek jako dziecko.

Answer 1

Nie używaj nth-child użyć nth-of-type

div.container > div:nth-of-type(odd) { 
    background: #e0e0e0; 
} 

jsFiddle example

Answer 2

Najprostszym rozwiązaniem jest oczywiście zawijanie elementów chcą paski.

Your updated jsFiddle.

HTML

<div class="container"> 
    <h3>Title</h3> 
    <div class="zebra"> 
     <div class="row">Content</div> 
     <div class="row">Content</div> 
    </div> 
    <h3>Title</h3> 
    <div class="zebra"> 
     <div class="row">Content</div> 
     <div class="row">Content</div> 
     <div class="row">Content</div> 
    </div> 
    <h3>Title</h3> 
    <div class="zebra"> 
     <div class="row">Content</div> 
     <div class="row">Content</div> 
     <div class="row">Content</div> 
     <div class="row">Content</div> 
    </div> 
</div> 

CSS

.row:nth-child(odd) {background: #e0e0e0;} 

pamiętać również, że jeśli browser support jest dla Ciebie ważne, może chcesz wygenerować dodatkowe zajęcia dla strony serwera zebra-pasemka zamiast .

Answer 3

Prawdopodobnie chcesz dopasować typu, a nie dzieci.

Zastosowanie : nth-of-type takich jak

.row:nth-of-type(odd) { 
    background: #e0e0e0; 
}