為什麼在嵌套元素上nth-of-type / nth-child選擇器無效？

Question

我正在嘗試更改包含在一個div中的奇數個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>

由於某種原因，當包含在我的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>

如何讓初始程式碼與上述程式碼相同？

Answer 1

:nth-of-type()與:nth-child()類似，它們都必須來自同一個父元素。如果你需要這些包裝的div，則應該在這些包裝器上使用: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>