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

小编典典

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

html

我正在尝试更改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>

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

阅读 341

2020-05-10

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

2020-05-10