CSS を使用して、ネストされた要素に影響を与えずに階層ナビゲーション メニューのスタイルを設定するにはどうすればよいですか?

階層ナビゲーションにおける CSS 継承の克服

ナビゲーション メニューなどの階層構造を操作する場合、ネストされた要素に影響を与えずに特定のレベルでスタイルをカスタマイズするのは困難な場合があります。この記事では、このようなシナリオ、特にサイドバー ナビゲーション メニューでの CSS 継承を防ぐ解決策について説明します。

次の HTML 構造を考えてみましょう。

この例では、事前定義されたテーマがあります。 ul タグと li タグの両方のデフォルトのスタイルを設定します。ただし、ユーザーはサブ項目に影響を与えずにトップレベルのリスト項目を変更しようとします。

これを実現するには、子セレクターを利用できます。

#parent > child

このセレクターを使用すると、スタイルは、ネストされた要素を除く、特に第 1 レベルの子に適用できます。例:

#sidebar > .top-level-nav {
  /* Styles that will only apply to top-level list items */
}

別の解決策は、より具体的なセレクターを使用することです:

#parent child child

このセレクターは、親要素より 1 レベル以上下の要素にスタイルを適用します。例:

#sidebar ul li child child {
  /* Styles that will only apply to elements that are three levels below the #sidebar element */
}

これらの手法により、ネストされた子孫に影響を与えることなく、特定の要素を対象としたスタイルを設定できます。ただし、Internet Explorer 6 は子セレクターをサポートしていないため、このようなシナリオでは代替ソリューションを使用する必要がある場合があります。

以上がCSS を使用して、ネストされた要素に影響を与えずに階層ナビゲーション メニューのスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。