gpt4 book ai didi

html - 为什么第 nth-of-type/nth-child 不适用于嵌套元素?

转载 作者:行者123 更新时间:2023-11-27 22:44:51 28 4
gpt4 key购买 nike

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

如何让初始代码和上面的一样?

最佳答案

: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()而是为了防止与 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>

关于html - 为什么第 nth-of-type/nth-child 不适用于嵌套元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59678782/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com