nth-of-type/nth-child セレクターがネストされた要素では無効なのはなぜですか?

Question

1 つの div 内に含まれる奇数の div のスタイルを変更しようとしています。ただし、奇数の div のスタイル セレクター nth-of-type(odd) は、別の div に含まれる場合、すべての div に影響します。通常の div と奇数の div のコードは次のとおりです。

.video-entry-summary {
  幅: 214ピクセル;
  高さ: 210ピクセル;
  マージン左: 10px;
  フロート: 左;
  位置: 相対的;
  オーバーフロー: 非表示;
  境界線: 1 ピクセルの黒一色。
}

.video-entry-summary:nth-of-type(odd) {
  幅: 214ピクセル;
  高さ: 210ピクセル;
  マージン左: 0px;
  フロート: 左;
  位置: 相対的;
  オーバーフロー: 非表示;
  境界線: 1 ピクセルの黒一色。
  背景: #ccc;
}

<div id="post-501" class="post-501 post type-post status-publish format-standard hentry category-moto-dz-映画タグ-ニュース-サブ-2">
  <div class="ビデオエントリー-概要">
    ビデオ1
  </div>
</div>

<div id="post-240" class="post-240 投稿タイプ-投稿ステータス-公開形式-標準ヘンリー カテゴリ-動画">
  <div class="ビデオエントリー-概要">
    ビデオ2
  </div>
</div>

<div id="post-232" class="post-232 投稿タイプ-投稿ステータス-公開形式-標準ヘンリー カテゴリ-動画">
  <div class="ビデオエントリー-概要">
    ビデオ3
  </div>
</div>

<div id="post-223" class="post-223 投稿タイプ-投稿ステータス-公開形式-標準ヘンリー カテゴリ-動画">
  <div class="ビデオエントリー-概要">
    ビデオ 4
  </div>
</div>

何らかの理由で、nth-of-type セレクターは、div に含まれている場合は機能しませんが、どの div にも含まれていない場合は機能します。

div で囲まれていない場合の作業バージョン:

.video-entry-summary {
  幅: 214ピクセル;
  高さ: 210ピクセル;
  マージン左: 10px;
  フロート: 左;
  位置: 相対的;
  オーバーフロー: 非表示;
  境界線: 1 ピクセルの黒一色。
}

.video-entry-summary:nth-of-type(odd) {
  幅: 214ピクセル;
  高さ: 210ピクセル;
  マージン左: 0px;
  フロート: 左;
  位置: 相対的;
  オーバーフロー: 非表示;
  境界線: 1 ピクセルの黒一色。
  背景: #ccc;
}

<div class="video-entry-summary">
  ビデオ1
</div>

<div class="ビデオエントリー-概要">
  ビデオ2
</div>

<div class="ビデオエントリー-概要">
  ビデオ3
</div>

<div class="ビデオエントリー-概要">
  ビデオ 4
</div>

初期コードを上記と同じにするにはどうすればよいですか?

Answer 1

:nth-of-type() は :nth-child() に似ていますが、同じ親要素から取得する必要があります。これらのラップされた div が必要な場合は、これらのラッパーで :nth-of-type():

を使用する必要があります。 リーリー

すべての兄弟要素が .post である場合、:nth-child() を使用して との競合を避ける必要があります。 nth-of-type()の本当の意味混乱:

リーリー

リーリー リーリー