Saya cuba menukar gaya div ganjil di dalam div. Atas sebab tertentu, apabila nth-of-type(odd) berada di dalam div lain, ia mempengaruhi semua div saya. Berikut ialah kod saya untuk div biasa dan div ganjil:
.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>
Atas sebab tertentu, nth-of-type tidak berfungsi apabila dibalut di dalam div saya, tetapi berfungsi apabila ia tidak dibalut di dalam mana-mana div.
Versi berfungsi apabila tidak dibungkus dalam 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>
Bagaimana saya boleh membuat kod awal berfungsi seperti yang di atas?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
: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; }Jika semua rakan sebaya adalah maksud sebenar
.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; }