nth-of-type/nth-child セレクターがネストされた要素に影響を与えないのはなぜですか?

Question

1 つの 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() の本当の意味混乱: リーリー

リーリー リーリー