Warum haben n-te Typ-/n-te Kind-Selektoren keine Auswirkung auf verschachtelte Elemente?

Question

Ich versuche, den Stil einer ungeraden Anzahl von Divs zu ändern, die in einem Div verschachtelt sind. Wenn nth-of-type(odd) in einem anderen Div verschachtelt ist, wirkt sich dies aus irgendeinem Grund auf alle Divs aus. Hier ist mein Code für normale Divs und eine ungerade Anzahl von Divs:

.video-entry-summary {
  Breite: 214px;
  Höhe: 210px;
  Rand links: 10px;
  schweben: links;
  Position: relativ;
  Überlauf versteckt;
  Rand: 1 Pixel einfarbig schwarz;
}

.video-entry-summary:nth-of-type(odd) {
  Breite: 214px;
  Höhe: 210px;
  Rand links: 0px;
  schweben: links;
  Position: relativ;
  Überlauf versteckt;
  Rand: 1 Pixel einfarbig schwarz;
  Hintergrund: #ccc;
}

<div id="post-501" class="post-501 Beitragstyp-Beitragsstatus-Veröffentlichungsformat-Standard Henry Category-Moto-dz- Filme tag-news-sub-2">
  <div class="video-entry-summary">
    Video 1
  </div>
</div>

<div id="post-240" class="post-240 Beitragstyp-Beitragsstatus-Veröffentlichungsformat-Standard Henry Category-Videos">
  <div class="video-entry-summary">
    Video 2
  </div>
</div>

<div id="post-232" class="post-232 Beitragstyp-Beitragsstatus-Veröffentlichungsformat-Standard Henry Category-Videos">
  <div class="video-entry-summary">
    Video 3
  </div>
</div>

<div id="post-223" class="post-223 Beitragstyp-Beitragsstatus-Veröffentlichungsformat-Standard Henry Category-Videos">
  <div class="video-entry-summary">
    Video 4
  </div>
</div>

Aus irgendeinem Grund funktioniert nth-of-type nicht, wenn es in einem Div verschachtelt ist, aber es funktioniert, wenn es nicht in einem Div verschachtelt ist.

Arbeitsversion, wenn nicht in einem Div verschachtelt:

.video-entry-summary {
  Breite: 214px;
  Höhe: 210px;
  Rand links: 10px;
  schweben: links;
  Position: relativ;
  Überlauf versteckt;
  Rand: 1 Pixel einfarbig schwarz;
}

.video-entry-summary:nth-of-type(odd) {
  Breite: 214px;
  Höhe: 210px;
  Rand links: 0px;
  schweben: links;
  Position: relativ;
  Überlauf versteckt;
  Rand: 1 Pixel einfarbig schwarz;
  Hintergrund: #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>

Wie kann ich den Anfangscode mit dem oben genannten identisch machen?

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>