Nth-of-Type không hoạt động khi bên trong Div

Question

Tôi đang cố gắng thay đổi kiểu div lẻ nằm bên trong div. Đối với một số lý do nth-of-type (lẻ) đang ảnh hưởng đến tất cả các div của tôi khi nó nằm trong div khác. Đây là mã CSS của tôi cho cả div thông thường và số lẻ lẻ ..

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

Vì lý do nào đó, "Nth-of-Type" không hoạt động khi được bao bọc bên trong div của tôi nhưng hoạt động khi chúng không được bao bọc bên trong trong bất kỳ div nào.

Version Working Không phải khi quấn bên trong div:http://jsfiddle.net/EMXYy/

Version làm việc khi không quấn bên trong div:http://jsfiddle.net/EMXYy/1/

Sidebar Lưu ý: Các lớp div với tựa đề "video-entry-summary "được cho là nằm trong div với id giống như" post-240 ". Nếu bạn cố khắc phục sự cố này, vui lòng không xóa các div này. :)

Answer 1

:nth-of-type() tương tự như :nth-child() trong đó tất cả chúng phải từ cùng một cấp độ gốc. Nếu bạn cần những wrapper div s, sử dụng :nth-of-type() trên những giấy gói thay vì:

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

Nếu tất cả các anh chị em là .post, sử dụng :nth-child() thay vì để tránh nhầm lẫn với 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; 
}