13

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>

初期コードを上記と同じように機能させるにはどうすればよいですか？

4

1 に答える 1

23

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

于 2012-12-04T01:42:21.340 に答える