CSSを使用してDIVの直接の子のみを選択するにはどうすればよいですか?

直接の子の CSS セレクター

クラス「セクション」を持つ DIV の最初の直接の子に CSS を適用するとします。ただし、スタイルが目的の要素以外にも影響を与えるという予期せぬ動作が発生しています。

使用したセレクターは「DIV.section DIV:first-child」です。このセレクターは、クラス「セクション」を持つ DIV 内にあり、その親の最初の子である任意の DIV と一致します。ただし、HTML では、「サブコンテンツ 1」 DIV が、「セクション」 DIV の最初の子である別の DIV 内にあるため、スタイルが予期せず適用されます。

これを解決するには、次のようにします。より正確なセレクター:

メインの両方の子用DIV:

div.section > div

このセレクターは「>」を使用します。シンボル。指定された親の直接の子である要素を選択します。この場合、「セクション」DIV の直接の子である 2 つの DIV のみと一致します。

ヘッダーのみ:

div.section > div:first-child

このセレクター前のクラスを「:first-child」疑似クラスと結合し、「section」DIV の最初の直接の子のみが選択されるようにします。これは、「ヘッダー」DIV を排他的にターゲットにします。

「>」に注意してください。シンボルは、IE6 を除くすべての主要なブラウザでサポートされています。 IE6 のサポートが重要な場合は、子 DIV にクラスを追加して直接スタイル設定するなど、別のアプローチを使用する必要がある場合があります。

以上がCSSを使用してDIVの直接の子のみを選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。