Pourquoi les sélecteurs nième de type/nième enfant n'ont-ils aucun effet sur les éléments imbriqués ?

Question

J'essaie de changer le style d'un nombre impair de divs imbriqués dans un div. Pour une raison quelconque, lorsque nth-of-type(odd) est imbriqué dans un autre div, cela affecte tous les div. Voici mon code pour les divs normaux et un nombre impair de divs :

.video-entry-summary {
  largeur : 214 px ;
  hauteur : 210px ;
  marge gauche : 10 px ;
  flotteur : gauche ;
  position : relative ;
  débordement caché;
  bordure : 1px noir uni ;
}

.video-entry-summary:ntième-de-type(impair) {
  largeur : 214 px ;
  hauteur : 210px ;
  marge gauche : 0px ;
  flotteur : gauche ;
  position : relative ;
  débordement caché;
  bordure : 1px noir uni ;
  arrière-plan : #ccc ;
}</pré>
<pre class="brush:html;toolbar:false;"><div id="post-501" class="post-501 type de message-statut de publication-format de publication-standard henry catégorie-moto-dz- films tag-news-sub-2">
  <div class="vidéo-entrée-résumé">
    vidéo 1
  </div>
</div>

<div id="post-240" class="post-240 post type-post status-publish format-standard henrycategory-videos">
  <div class="vidéo-entrée-résumé">
    vidéo 2
  </div>
</div>

<div id="post-232" class="post-232 type de publication-statut de publication-format de publication-catégorie de henry standard-vidéos">
  <div class="vidéo-entrée-résumé">
    vidéo 3
  </div>
</div>

<div id="post-223" class="post-223 type de publication-statut de publication-format de publication-catégorie de henry standard-vidéos">
  <div class="vidéo-entrée-résumé">
    vidéo 4
  </div>
</div>

Pour une raison quelconque, nth-of-type ne fonctionne pas lorsqu'il est imbriqué dans un div, mais fonctionne lorsqu'il n'est imbriqué dans aucun div.

Version de travail lorsqu'elle n'est pas imbriquée dans un div :

.video-entry-summary {
  largeur : 214 px ;
  hauteur : 210px ;
  marge gauche : 10 px ;
  flotteur : gauche ;
  position : relative ;
  débordement caché;
  bordure : 1px noir uni ;
}

.video-entry-summary:ntième-de-type(impair) {
  largeur : 214 px ;
  hauteur : 210px ;
  marge gauche : 0px ;
  flotteur : gauche ;
  position : relative ;
  débordement caché;
  bordure : 1px noir uni ;
  arrière-plan : #ccc ;
}</pré>
<pre class="brush:html;toolbar:false;"><div class="video-entry-summary">
  vidéo 1
</div>

<div class="vidéo-entrée-résumé">
  vidéo 2
</div>

<div class="vidéo-entrée-résumé">
  vidéo 3
</div>

<div class="vidéo-entrée-résumé">
  vidéo 4
</div>

Comment puis-je rendre le code initial identique à celui ci-dessus ?

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; 
}

Si tous les éléments frères et sœurs sont le vrai sens de .post，请使用:nth-child()来避免与:nth-of-type()Confus :

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