階層メニューで CSS の継承を防ぐにはどうすればよいですか?

階層メニューでの CSS 継承の防止

CSS では、継承とは、親要素から子要素に継承されるスタイルを指します。継承は一般に望ましいものですが、ネストされた階層内の特定のレベルのスタイルを変更する場合には問題が生じる可能性があります。このようなシナリオの 1 つは、サブ項目に影響を与えずにトップレベルの項目がカスタム スタイルを必要とする階層ナビゲーション メニューで発生します。

子セレクターの使用

継承を防ぐ 1 つのアプローチは次のとおりです。子セレクター (>) を使用します。次の CSS ルールは、#sidebar ul 要素の直接の子のみを対象としています:

#sidebar > ul li {
  /* styles that will not be inherited by sub-list items */
}

ただし、この方法は、複数レベルのネストされたリストがある場合には適さない可能性があります。

特定のクラスの使用

別の解決策には、最上位のリスト項目に特定のクラスを使用することが含まれます。次の HTML では、各トップレベルのリスト項目にはクラス「top-level-nav」があります:

<ul>

次に、次の CSS を使用してトップレベルの項目をターゲットにできます:

#sidebar .top-level-nav {
  /* styles that will not be inherited */
}

このメソッドにより、.top-level-nav クラスに適用されるスタイルがサブ項目にカスケードされなくなります。事前に作成されたテーマにサブリスト項目の特定のスタイルが含まれている場合は、それらのスタイルをオーバーライドする必要があることに注意してください。これを行うには、 #sidebar .top-level-nav のスタイルをより具体的に宣言するか、追加のセレクターを使用します。

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