Nth-of-Type nie działa, gdy wewnątrz Div

Question

Próbuję zmienić styl divy dziwne, które są wewnątrz div. Z jakiegoś powodu nth-of-type (nieparzyste) wpływa na wszystkich moich div, gdy znajduje się wewnątrz innego div. Oto mój kod CSS zarówno regularnych div i nieparzystych div ..

.video-entry-summary { 
    width:214px; 
    height:210px; 
    margin-left:10px; 
    float:left; 
    position:relative; 
    overflow:hidden; 
    border:1px solid black; 
} 

.video-entry-summary:nth-of-type(odd) { 
    width:214px; 
    height:210px; 
    margin-left:0px; 
    float:left; 
    position:relative; 
    overflow:hidden; 
    border:1px solid black; 
    background:#ccc; 
} 

Dla jakiegoś powodu, „Pn-of-type” nie działa, gdy owinięty wewnątrz mojego div, ale nie działa, gdy nie są zapakowane wewnątrz żadnych elementów div.

Not wersja robocza gdy owinięty wewnątrz div:http://jsfiddle.net/EMXYy/

Wersja Robocza gdy nie owinięty wewnątrz div:http://jsfiddle.net/EMXYy/1/

Sidebar Uwaga: Klasy div zatytułowanych „video-entry-summary "powinny znajdować się w elementach div o identyfikatorze id" po 240 ". Jeśli spróbujesz rozwiązać ten problem, nie usuwaj tych elementów div. :)

Answer 1

:nth-of-type() jest podobna do :nth-child(), ponieważ wszystkie muszą pochodzić od tego samego rodzica. Jeśli potrzebujesz tych otoki div, skorzystaj :nth-of-type() na tych owijarki Zamiast:

div.post:nth-of-type(odd) .video-entry-summary { 
    width:214px; 
    height:210px; 
    margin-left:0px; 
    float:left; 
    position:relative; 
    overflow:hidden; 
    border:1px solid black; 
    background:#ccc; 
} 

Jeśli wszystkie rodzeństwo .post użyć :nth-child() zamiast tego uniknąć zamieszania z what :nth-of-type() really means:

.post:nth-child(odd) .video-entry-summary { 
    width:214px; 
    height:210px; 
    margin-left:0px; 
    float:left; 
    position:relative; 
    overflow:hidden; 
    border:1px solid black; 
    background:#ccc; 
}