为什么nth-of / nth-child不对嵌套元素起作用？

Question

我正在尝试更改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中时却起作用。.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>``如何使初始代码与上述代码相同？