階層構造での CSS の継承を防ぐにはどうすればよいですか?

CSS 継承の防止

ナビゲーション メニューなどの階層構造を作成する場合、多くの場合、子要素に影響を与えずに親要素にスタイルを適用する必要があります。 。 CSS の継承によりスタイルが HTML ツリーの下に自動的にカスケードされるため、これは困難になる可能性があります。

この問題を解決するには、子セレクター (">") の利用を検討してください。子要素の前にその親を置くことで、特定の親の直接の子にのみ適用されるスタイルを指定できます。たとえば、次のコードを使用します。

#sidebar > .top-level-nav {
  /* Styles for top-level navigation items */
}

「.top-level-nav」クラス内のスタイルは、ネストされたリスト項目を除き、「#sidebar」要素の直接の子孫にのみ適用されます。

あるいは、「子の子」セレクター (" > ") を使用して、直接の子孫レベルを超えて要素をターゲットにすることもできます。この構文を使用すると、親より 1 レベル以上下の要素に適用するスタイルを指定できます。たとえば、次のコードを使用します。

#sidebar .top-level-nav > li {
  /* Styles for sub-heading elements */
}

このセレクターは、特に小見出しリスト項目にスタイルを適用し、それらが ".top-level-nav" クラスから確実に継承されるようにしながら、スタイルをオーバーライドします。上位レベルの親から継承された可能性があります。

以上が階層構造での CSS の継承を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。