Nth-of-Type funktioniert nicht, wenn innerhalb Div

Question

Ich versuche, den Stil der ungeraden Divs, die in einem Div sind zu ändern. Aus irgendeinem Grund beeinflusst der n-te-Typ (ungerade) alle meine divs, wenn es in einem anderen div ist. Hier ist meine CSS-Code sowohl für den regulären div und die ungeraden divs ..

.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; 
} 

Aus irgendeinem Grund die „Nth-of-Type“ funktioniert nicht, wenn innerhalb meines divs gewickelt, aber funktioniert, wenn Sie sind nicht in divs eingepackt.http://jsfiddle.net/EMXYy/1/

Sidebar Hinweis: Der Titel „div-Klassen-Video-Eintrag Zusammenfassunghttp://jsfiddle.net/EMXYy/

Arbeitsversion, wenn sie nicht innerhalb div eingewickelt:

nicht funktioniert Version, wenn sie innerhalb div gewickelt "sollen in den divs mit ids wie" post-240 "sein. Wenn Sie versuchen, dieses Problem zu beheben, entfernen Sie diese Divs nicht. :)

Answer 1

:nth-of-type() ist ähnlich wie :nth-child() in dem sie alle aus dem gleichen Elternteil stammen müssen. Wenn Sie diese Wrapper div s benötigen, verwenden :nth-of-type() auf diesen Wrapper statt:

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; 
} 

Wenn alle Geschwister .post sind, verwenden :nth-child() statt Verwirrung zu vermeiden mit 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; 
}