Warum sind n-te Typ-/n-te Kind-Selektoren für verschachtelte Elemente ungültig?

Question

Ich versuche, den Stil einer ungeraden Anzahl von Divs zu ändern, die in einem Div enthalten sind. Aber der Stilselektor nth-of-type(odd) für ungerade Divs wirkt sich auf alle Divs aus, wenn er in einem anderen Div enthalten ist. Hier ist mein Code für ein normales Div 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 funktionieren die nth-of-type-Selektoren nicht, wenn sie in meinem Div enthalten sind, aber sie funktionieren, wenn sie in keinem Div enthalten sind.

Arbeitsversion, wenn nicht in einem div eingeschlossen:

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