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; } ビデオ1ビデオ2ビデオ3ビデオ 4
何らかの理由で、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; } ビデオ1ビデオ2ビデオ3ビデオ 4
初期コードを上記と同じにするにはどうすればよいですか?
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
を使用する必要があります。 リーリー:nth-of-type()は:nth-child()に似ていますが、同じ親要素から取得する必要があります。これらのラップされたdivが必要な場合は、これらのラッパーで:nth-of-type():すべての兄弟要素が
リーリー.postである場合、:nth-child()を使用してとの競合を避ける必要があります。 nth-of-type()の本当の意味混乱: