- 首页
- 前端开发
- 为什么 nth-of-type/nth-child 不适用于嵌套元素?
为什么 nth-of-type/nth-child 不适用于嵌套元素?
[英] Why doesn't nth-of-type/nth-child work on nested elements?
本文介绍了为什么 nth-of-type/nth-child 不适用于嵌套元素?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试更改 div 内的奇数 div 的样式.出于某种原因，当 nth-of-type(odd) 位于另一个 div 中时，它会影响我的所有 div.这是我的常规 div 和奇数 div 的代码:
.video-entry-summary {宽度:214px；高度:210px；左边距:10px；向左飘浮;位置:相对；溢出:隐藏；边框:1px纯黑色；}.video-entry-summary:nth-of-type(odd) {宽度:214px；高度:210px；左边距:0px；向左飘浮;位置:相对；溢出:隐藏；边框:1px纯黑色；背景:#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">视频 1
<div id="post-240" class="post-240 post type-post status-publish format-standard hentry category-videos"><div class="video-entry-summary">视频 2
<div id="post-232" class="post-232 post type-post status-publish format-standard hentry category-videos"><div class="video-entry-summary">视频 3
<div id="post-223" class="post-223 post type-post status-publish format-standard hentry category-videos"><div class="video-entry-summary">视频 4
出于某种原因，nth-of-type 在包裹在我的 div 中时不起作用，但是当它们没有包裹在任何 div 中时却起作用.
未包含在 div 中的工作版本:
.video-entry-summary {宽度:214px；高度:210px；左边距:10px；向左飘浮;位置:相对；溢出:隐藏；边框:1px纯黑色；}.video-entry-summary:nth-of-type(odd) {宽度:214px；高度:210px；左边距:0px；向左飘浮;位置:相对；溢出:隐藏；边框:1px纯黑色；背景:#ccc;}
视频 1
<div class="video-entry-summary">视频 2
<div class="video-entry-summary">视频 3
<div class="video-entry-summary">视频 4
如何让初始代码和上面一样工作?
解决方案
:nth-of-type() 与 :nth-child() 的相似之处在于他们必须都来自同一个父母.如果您需要那些包装器 div ，请在这些包装器上使用 :nth-of-type() :
div.post:nth-of-type(odd) .video-entry-summary {宽度:214px；高度:210px；左边距:0px;向左飘浮;位置:相对；溢出:隐藏；边框:1px纯黑色；背景:#ccc;}
如果所有兄弟都是.post，使用:nth-child() 而不是为了防止与 :nth-of-type() 的真正含义:
.post:nth-child(odd) .video-entry-summary {宽度:214px；高度:210px；左边距:0px;向左飘浮;位置:相对；溢出:隐藏；边框:1px纯黑色；背景:#ccc;}
.video-entry-summary {宽度:214px；高度:210px；左边距:10px；向左飘浮;位置:相对；溢出:隐藏；边框:1px纯黑色；}.post:nth-child(odd) .video-entry-summary {宽度:214px；高度:210px；左边距:0px；向左飘浮;位置:相对；溢出:隐藏；边框:1px纯黑色；背景:#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">视频 1
<div id="post-240" class="post-240 post type-post status-publish format-standard hentry category-videos"><div class="video-entry-summary">视频 2
<div id="post-232" class="post-232 post type-post status-publish format-standard hentry category-videos"><div class="video-entry-summary">视频 3
<div id="post-223" class="post-223 post type-post status-publish format-standard hentry category-videos"><div class="video-entry-summary">视频 4
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>
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.
Working version when not wrapped inside 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() 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;
}
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-type/nth-child 不适用于嵌套元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
