CSSの継承を防ぐにはどうすればよいですか？

ネストされたリスト（<ul>タグと<li>タグ）を使用する階層ナビゲーションメニューがサイドバーにあります。リストアイテムのスタイルがすでにある既成のテーマを使用していますが、トップレベルアイテムのスタイルを変更したいのですが、サブアイテムには適用しません。それらのスタイルを子リストアイテムにカスケードせずに、トップレベルのリストアイテムタグにスタイルを適用する簡単な方法はありますか？サブアイテムにオーバーライドスタイルを明示的に追加できることは理解していますが、「これらのスタイルをこのクラスに適用し、カスケードしないでください」と言う簡単な方法がある場合は、そのスタイルコードをすべて複製する必要はありません。それらを任意の子要素にまで下げます」。これが私が使用しているhtmlです：

<ul id="sidebar">
  <li class="top-level-nav">
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li class="top-level-nav">
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

そのため、CSSにはすでにスタイルが#sidebar ulあり#sidebar ul liますが#sidebar .top-level-nav、サブ子にカスケードされないスタイルを追加したいと思います。これを簡単に行う方法はありますか、それともすべてのスタイルを再配置して、オンになっていたスタイルが#sidebar ul特定のクラスに固有になるようにする必要がありますか？

現在のところ、親セレクターはありません（または、Shaun Inmanが呼んでいるように、修飾セレクター）。そのため、親リストアイテムのスタイルをオーバーライドするには、子リストアイテムにスタイルを適用する必要があります。

カスケードは、カスケードスタイルシートの要点の一種であるため、この名前が付けられています。

子セレクターを使用します

だから使用する

#parent > child

最初のレベルの子供だけにスタイルを適用させます。残念ながら、IE6は子セレクターをサポートしていません。

それ以外の場合は使用できます

#parent child child

複数のレベル下にある子に別の特定のスタイルを設定します。

呼ばれるプロパティがありますallでCSS3の継承モジュールが。それはこのように動作します：

#sidebar ul li {
  all: initial;
}

2016-12の時点で、IE / EdgeとOperaMiniを除くすべてのブラウザーがこのプロパティをサポートしています。

*セレクターを使用して、子スタイルをデフォルトに戻すことができます

例

#parent {
    white-space: pre-wrap;
}

#parent * {
    white-space: initial;
}

iframeでラップすると、親のcssが廃止されます。

簡単な答えは次のとおりです。いいえ、CSSの継承を防ぐことはできません。親に設定されているスタイルのみを上書きできます。仕様を参照してください：

HTMLドキュメント内のすべての要素は、親をhtml持たないルート要素（）を除いて、その親からすべての継承可能なプロパティを継承します。- W3C

すべての継承されたプロパティをオーバーライドすることは別として。initialキーワードを使用することもできますcolor: initial;。またall、たとえばall: initial;、すべてのプロパティを一度にリセットするなどと一緒に使用することもできます。例：

.container {
  color: blue;
  font-style: italic;
}
.initial {
  all: initial;
}

<div class="container">
  The quick brown <span class="initial">fox</span> jumps over the lazy dog
</div>

使用できるかによるブラウザサポートテーブル...

• all （現在、IEとEdgeの両方でサポートはありませんが、その他は良好です）
• initial （現在、IEでのサポートはありませんが、その他は良好です）

場合によっては、直接子セレクター>を使用すると便利なことがあります。例：

.list > li {
  border: 1px solid red;
  color: blue;
}

<ul class="list">
  <li>
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li>
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

境界線スタイルは、継承さ<li>れborderていないプロパティと同様に、直接の子にのみ適用されています。ただしcolor、継承されたプロパティと同様に、テキストの色はすべての子に適用されています。

したがって、>セレクターは、継承の防止に関しては、継承されていないプロパティでのみ役立ちます。

jQueryのようなものを使用して、この動作を「無効」にすることができますが、cssとjavascriptで表示ロジックを取得するため、これが良い解決策とは思えません。それでも、要件によっては、jQueryのcss utilsを使用すると、特にIE6で機能させようとしている場合に、ハッキーなcssを試すよりも作業が楽になることがあります。

たとえば、XHTMLドキュメントに2つのdivがある場合。

<div id='div1'>
    <p>hello, how are you?</p>
    <div id='div2'>
        <p>I am fine, thank you.</p>
    </div>
</div>

次に、CSSでこれを試してください。

#div1 > #div2 > p{
    color: red;
}

'div2'段落にのみ影響します。

#div1 > p {
    color: red;
} 

'div1'段落にのみ影響します。

のクラス参照は必要ありませんli。のようなCSSを持つ代わりに

li.top-level-nav { color:black; }

あなたは書ける

ul#sidebar > li { color:black; }

これliにより、サイドバーからすぐに下がるsにのみスタイリングが適用されますul。

「#sidebarulli」セレクターでデフォルトに戻すだけです