ネストされた要素での CSS の継承を防ぐにはどうすればよいですか?

ネストされた要素での CSS 継承の防止

Web デザインでは、ネストされたメニューなどの複雑な要素のスタイルを設定するときに CSS 継承を制御することが重要です。スタイルが子要素にカスケードダウンするのを防ぎ、Web サイトの外観を正確に制御する方法を詳しく見てみましょう。

次の状況を考えてみましょう。サイドバーにリスト (< ul> タグと

タグ）。サブ項目に影響を与えずにトップレベルのメニュー項目 (.top-level-nav) のスタイルを変更したいと考えています。

子セレクターの使用

解決策の 1 つは、子セレクター (>)。このセレクターを使用すると、子孫に影響を与えることなく、親の特定の子要素をターゲットにすることができます。この場合、次のコードは #sidebar の最初のレベルの子にのみスタイルを適用します:

#sidebar > .top-level-nav {
  /* Styles here will only apply to top-level menu items */
}</p>
<p>このアプローチにより、.top-level-nav に適用されたスタイルがサブレベルにカスケードされなくなります。 - ネストされたリスト内の見出し (<li> タグ)。</p>
<h3>ネストされたリストの使用セレクター</h3>
<p>親より 1 レベル以上下の子要素にスタイルを適用する場合は、ネストされたセレクターを使用できます。次の例は、ネストの 2 番目のレベル内の子をターゲットにしています:</p>
<pre class="brush:php;toolbar:false">#sidebar .top-level-nav ul li {
  /* Styles here will only apply to sub-headings within top-level menu items */
}

ネストされたセレクターを組み合わせることで、要素のスタイルをきめ細かく制御でき、親のスタイルが子に自動的に継承されないようにすることができます。 .

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