搜索

首页  >  问答  >  正文

为什么 nth-of-type/nth-child 对嵌套元素不起作用?

我正在尝试更改 div 内的奇数 div 的样式。由于某种原因,当 nth-of-type(odd) 位于另一个 div 内时,它会影响我的所有 div。这是我的常规 div 和奇数 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 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 内时却起作用。

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


如何使初始代码与上面的代码一样工作?

P粉203792468P粉203792468517 天前615

全部回复(1)我来回复

  • P粉078945182

    P粉0789451822023-10-24 10:13:28

    :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;
    }
    video 1
    video 2
    video 3
    video 4

    回复
    0
  • 取消回复