<p>我正在尝试更改包含在一个div中的奇数个div的样式。但奇数个div的样式选择器<code>nth-of-type(odd)</code>在包含在另一个div中时会影响到所有的div。以下是我的普通div和奇数个div的代码：</p> <p><br /></p> <pre class="brush:css;toolbar:false;">.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; }</pre> <pre class="brush:html;toolbar:false;"><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></pre> <p><br /></p> <p>由于某种原因，当包含在我的div中时，<code>nth-of-type</code>选择器无法工作，但当它们不包含在任何div中时可以工作。</p> <p><strong>不包含在div中时的工作版本：</strong></p> <p><br /></p> <pre class="brush:css;toolbar:false;">.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; }</pre> <pre class="brush:html;toolbar:false;"><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></pre> <p><br /></p> <p>如何使初始代码与上述代码相同？</p>

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(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>