トップレベル項目のスタイル設定中にネストされたメニューでの CSS の継承を防ぐにはどうすればよいですか?

ネストされたメニューでの CSS 継承の防止

階層メニューでは、親要素から継承されたスタイルが問題になることがあります。この記事では、ネストされたナビゲーション メニューで CSS の継承を防止し、トップレベルの項目のみが特定のスタイルを持つようにする問題について説明します。

提供される HTML 構造は、階層構造を持つネストされたリストを利用します。ネストされたサブ項目に影響を与えずに、トップレベルのリスト項目 (「top-level-nav」クラスの「li」) にスタイルを適用する方法について疑問が生じます。

子セレクターの使用

1 つのアプローチは、子セレクターを使用することです。 (">"):

#parent > child

このシナリオでは、次のようになります:

#sidebar > .top-level-nav

これにより、スタイルは「#sidebar」要素の直接の子孫にのみ適用されます。 、トップレベルのナビゲーション項目のみを効果的にターゲットにします。特に、Internet Explorer 6 は子セレクターをサポートしていません。

複数の子セレクターの使用

代わりに、複数の子セレクターを使用して、特定の深さの要素のスタイルを指定できます。 :

#parent child child

用インスタンス:

#sidebar child child

これは、「#sidebar」内の 2 レベルの深さの要素を対象としています。

コードの重複を避ける

重複を避けるにはサブ項目のスタイルでは、既存の「#sidebar ul li」ルールを変更してすべてのネストされたリスト項目に適用できますが、特定のスタイルは最上位項目の場合は、前述の子セレクターを使用してターゲットを指定できます。

以上がトップレベル項目のスタイル設定中にネストされたメニューでの CSS の継承を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。