Pourquoi ne pas nth-of-type/nth-child travail sur les éléments imbriqués?
Je suis en train de changer le style de bizarre divs qui sont à l'intérieur d'un div. Pour une raison quelconque, le nth-of-type(odd)
affecte tous mes divs quand il est à l'intérieur d'une div. Voici mon code pour le régulier de la div et l'étrange divs:
CSS:
.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;
}
HTML:
<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>
Pour une raison quelconque, le nth-of-type
ne fonctionne pas lorsque enveloppé à l'intérieur de mes divs, mais fonctionne quand ils ne sont pas emballés à l'intérieur dans tous les divs.
Version de travail lorsqu'il n'est pas enveloppé à l'intérieur de la div:
CSS:
.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;
}
HTML:
<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>
Comment faire le code initial de travail le même que ci-dessus, on?
Vous devez vous connecter pour publier un commentaire.
:nth-of-type()
est similaire à:nth-child()
dans qu'elles doivent toutes être de la même mère. Si vous avez besoin de ces wrapperdiv
s, utilisez:nth-of-type()
sur les wrappers de la place:Si tous les frères et sœurs sont
.post
, utilisez:nth-child()
au lieu de cela, pour éviter la confusion avec ce que:nth-of-type()
que signifie vraiment:CSS:
HTML: