为什么nth-of/nth-child不对嵌套元素起作用? [英] Why doesn't nth-of-type/nth-child work on nested elements?

问题描述

我正在尝试更改div内奇数div的样式.由于某些原因，nth-of-type(odd)在另一个div内时会影响我的所有div.这是我的常规div和奇数div的代码:

I'm trying to change the style of odd divs that are inside a div. For some reason the nth-of-type(odd) is affecting all my divs when it's inside another div. Here is my code for both the regular div and the odd divs:

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

由于某些原因，nth-of-type当包装在我的div内时不起作用，但是当它们未包装在任何div内时起作用.

For some reason, the nth-of-type doesn't work when wrapped inside of my divs, but does work when they aren't wrapped inside in any divs.

未包装在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>

如何使初始代码与上述代码相同?

​How to make the initial code working the same as the above one?

推荐答案

:nth-of-type()与:nth-child()相似，因为它们都必须来自同一父级.如果需要这些包装器div，请在这些包装器上使用:nth-of-type():

:nth-of-type() is similar to :nth-child() in that they must all be from the same parent. If you need those wrapper divs, use :nth-of-type() on those wrappers instead:

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()真正的意思:

If all the siblings are .post, use :nth-child() instead to prevent confusion with what :nth-of-type() really means:

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

这篇关于为什么nth-of/nth-child不对嵌套元素起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！