为什么没有第n-的类型上嵌套元素/第n个孩子的工作？(Why doesn't nth-of-

我试图改变奇数的div是一个div里面的风格。出于某种原因， nth-of-type(odd)是影响了我的所有div时，它的另一个DIV中。这里是我的两个常规的DIV和奇数的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; }

 <div id="post-501" class="post-501 post type-post status-publish format-standard hentry category-moto-dz-films tag-news-sub-2"> <div class="video-entry-summary"> video 1 </div> </div> <div id="post-240" class="post-240 post type-post status-publish format-standard hentry category-videos"> <div class="video-entry-summary"> video 2 </div> </div> <div id="post-232" class="post-232 post type-post status-publish format-standard hentry category-videos"> <div class="video-entry-summary"> video 3 </div> </div> <div id="post-223" class="post-223 post type-post status-publish format-standard hentry category-videos"> <div class="video-entry-summary"> video 4 </div> </div>

出于某种原因，在nth-of-type我的div内包裹时不工作，但是当他们没有在任何的div包裹里面确实工作。

工作版本时，里面的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; }

 <div class="video-entry-summary"> video 1 </div> <div class="video-entry-summary"> video 2 </div> <div class="video-entry-summary"> video 3 </div> <div class="video-entry-summary"> video 4 </div>

如何使最初的代码工作同上一个？

:nth-of-type()是类似于:nth-child()它们都必须从同一祖先。如果您需要这些包装div S，使用:nth-of-type()上的包装，而不是：

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

如果所有的兄弟姐妹.post ，使用:nth-child()代替，以防止混淆什么:nth-of-type()的真正含义：

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

 .video-entry-summary { width: 214px; height: 210px; margin-left: 10px; float: left; position: relative; overflow: hidden; border: 1px solid black; } .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; }

 <div id="post-501" class="post-501 post type-post status-publish format-standard hentry category-moto-dz-films tag-news-sub-2"> <div class="video-entry-summary"> video 1 </div> </div> <div id="post-240" class="post-240 post type-post status-publish format-standard hentry category-videos"> <div class="video-entry-summary"> video 2 </div> </div> <div id="post-232" class="post-232 post type-post status-publish format-standard hentry category-videos"> <div class="video-entry-summary"> video 3 </div> </div> <div id="post-223" class="post-223 post type-post status-publish format-standard hentry category-videos"> <div class="video-entry-summary"> video 4 </div> </div>