Mengapakah pemilih ke-nth-of-type/ke-anak-anak tidak sah pada elemen bersarang?

Question

Saya cuba menukar gaya bilangan ganjil div yang terkandung dalam satu div. Tetapi pemilih gaya jenis-jenis(ganjil) untuk div bernombor ganjil akan menjejaskan semua div apabila disertakan dalam div lain. Berikut ialah kod saya untuk div biasa dan bilangan div yang ganjil:

.video-entry-summary {
  lebar: 214px;
  ketinggian: 210px;
  jidar-kiri: 10px;
  terapung: kiri;
  kedudukan: relatif;
  limpahan: tersembunyi;
  sempadan: 1px hitam pejal;
}

.video-entry-summary:nth-of-type(odd) {
  lebar: 214px;
  ketinggian: 210px;
  jidar-kiri: 0px;
  terapung: kiri;
  kedudukan: relatif;
  limpahan: tersembunyi;
  sempadan: 1px hitam pejal;
  latar belakang: #ccc;
}

<div id="post-501" class="post-501 post type-post status-publish format-standard hentry category-moto-dz- filem tag-berita-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></pra>
<p><br /></p>
<p>Atas sebab tertentu, pemilih <kod>jenis</kod> tidak berfungsi apabila disertakan dalam div saya, tetapi ia berfungsi apabila ia tidak disertakan dalam mana-mana div. </p>
<p><strong>Versi berfungsi apabila tidak disertakan dalam div: </strong></p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.video-entry-summary {
  lebar: 214px;
  ketinggian: 210px;
  jidar-kiri: 10px;
  terapung: kiri;
  kedudukan: relatif;
  limpahan: tersembunyi;
  sempadan: 1px hitam pejal;
}

.video-entry-summary:nth-of-type(odd) {
  lebar: 214px;
  ketinggian: 210px;
  jidar-kiri: 0px;
  terapung: kiri;
  kedudukan: relatif;
  limpahan: tersembunyi;
  sempadan: 1px hitam pejal;
  latar belakang: #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>

Bagaimanakah saya boleh membuat kod awal sama seperti di atas?

Answer 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; 
}

Jika semua unsur adik beradik adalah maksud sebenar .post，则应该使用:nth-child()来避免与:nth-of-type()Mengelirukan:

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