`DIV.section DIV:first-child` が最初の直接の子のみをスタイル設定しないのはなぜですか?

直接の子セレクターの特異性

CSS を HTML 要素に適用する場合、セレクターの特異性を理解することが重要です。あなたのシナリオでは、セレクター DIV.section DIV:first-child は、「サブコンテンツ 1」と「ヘッダー」 div の両方をスタイル設定しているように見えます。

ただし、セレクターは、最初の直接の子のみと一致することを目的としています。クラス「セクション」を持つ div の。元のセレクターが期待どおりに動作しない理由を詳しく見てみましょう。

直接の子孫と直接の子について理解する

:first-child 疑似クラスは最初の子を選択します要素の。ただし、あなたの場合は、それを DIV.section DIV に適用しています。これは、「クラス 'section' を持つ div の子孫であるすべての div を選択する」ことを意味します。これには、直接の子とネストされた子の両方が含まれます。

直接子孫セレクターの使用

クラス「セクション」を持つ div の最初の直接の子のみをターゲットにするには、次のようにします。直接の子孫セレクター (>) を使用する必要があります。この演算子は、特定の親の直接の子である要素と一致します。変更されたセレクターは次のようになります。

div.section > div:first-child

このセレクターは、クラス「セクション」を持つ div の最初の直接の子であるため、「ヘッダー」 div のみを正しくスタイル設定します。

レガシーブラウザの問題

直接の子孫セレクターは古いブラウザではサポートされていないことに注意してください。 Internet Explorer 6 など。このようなブラウザをサポートする必要がある場合は、子 div にクラスを追加するなど、別の方法を使用する必要がある場合があります。

以上が`DIV.section DIV:first-child` が最初の直接の子のみをスタイル設定しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。