私は次のような階層を持っています：
<div class="outer">
<h1>Heading</h1>
<p>Paragraph</p>
<p><a>Link</a></p>
<div class="inner">
<h1>Heading</h1>
<p>Paragraph</p>
<p><a>Link</a></p>
</div>
</div>
div内の要素をouter特定の方法でスタイル設定し、innerdiv内の要素を別の方法でスタイル設定する必要があります。
ただし、ルールで定義されinnerたすべてのプロパティのリセットを使用して、要素のルールを汚染する必要はありません。outer
次の例では、を避けたいと思いmargin: 0pxます。もちろん、私のスタイルシートははるかに複雑であり、リセットは非常に多く、煩わしいことに注意してください。
outer a { margin: 5px; }
inner a { margin: 0px; color: orange; }
私の最初の反射神経は直接子セレクターを使用すること>ですが、それは、たとえば、リンク、ストロング、スパンなどの場合は面倒になります。
次の例：
outer > a { color: orange; }
スタイリングしません：
<div class="outer"><p><a>Link</a></p></div>
<div class="outer"><strong><a>Link</a></strong></div>
<div class="outer"><ul><li><a>Link</a></li></ul></div>
<div class="outer"><table><tr><td><a>Link</a></td></tr></table></div>
...
私はどちらかの他の方法を見つける必要があります
innerリセットを明示的に定義せずに、で階層を壊します。- で停止するように外側のスタイルの範囲を制限します
inner。
これは可能ですか？この場合、HTML構造を再配置することはできないことに注意してください。