html - 継承された CSS スタイルを無効にするにはどうすればよいですか?

Question

そこで、次の方法を使用して角の丸いコンテナを作成しています。

div.rounded {
    background: #CFFEB6 url('tr.gif') no-repeat top right;
}
div.rounded div {
    background: url('br.gif') no-repeat bottom right;
}
div.rounded div div {
    background: url('bl.gif') no-repeat bottom left;
}
div.rounded div div div {
    padding: 10px;
}

ここで、コンテナ内で div を使用したいと思います。

.button {
    border: 1px solid #999;
     background:#eeeeee url('');
    text-align:center;
}
.button:hover {
    background-color:#c4e2f2;
}

<div class='round'><div><div><div>
<div class='button'><a href='#'>Test</a></div>
</div></div></div></div>

ただし、ネストされた div 内に div を配置すると、ボタンの隅に bl 画像が表示されます。

継承された背景画像を削除するにはどうすればよいですか?

Answer 1

簡単な答えは、変更することです

div.rounded div div div {
    padding: 10px;
}

に

div.rounded div div div {
    background-image: none;
    padding: 10px;
}

その理由は、ルールを作成すると、ネストに関係なく、クラスが の内部にネストされたすべての要素div.rounded div divを意味するためです。 divdivdivrounded

直系の子孫である div のみをターゲットにしたい場合は、構文を使用できますdiv.rounded div > div(ただし、これは最近のブラウザーでのみサポートされています)。

ちなみに、この方法は通常、 を 2 つだけdiv(上下または左右に 1 つずつ)使用するように簡略化できます。

Answer 2

カスケード スタイル シートは、継承用に設計されています。継承は、それらの存在に固有のものです。カスケードするように構築されていない場合、それらは単に「スタイル シート」と呼ばれます。

つまり、継承されたスタイルがニーズに合わない場合は、オブジェクトに近い別のスタイルでオーバーライドする必要があります。「継承のブロック」という概念は忘れてください。

div、p、pre などの一般的なタグにはスタイルを与えず、個々のオブジェクトごとにスタイルを与えることで、よりきめ細かいソリューションを選択することもできます。

たとえば、特定の ID を持つオブジェクトに # で始まるスタイルを使用できます。

<style>
#dividstyle{
    font-family:MS Trebuchet;
}
</style>
<div id="dividstyle">Hello world</div>

オブジェクトのクラスを定義できます:

<style>
.divclassstyle{
    font-family: Calibri;
}
</style>
<div class="divclassstyle">Hello world</div>

それが役に立てば幸い。

Answer 3

最もクリーンな解決策は、おそらく div を正確な子として指定することです。

これを変更してみてください：

div.rounded div div {
    background: url('bl.gif') no-repeat bottom left;
}

これに：

div.rounded > div > div {
    background: url('bl.gif') no-repeat bottom left;
}

Answer 4

最も簡単なのは、すべての div をクラス化することです。

div.rounded {
    background: #CFFEB6 url('tr.gif') no-repeat top right;
}
div.rounded div.br {
    background: url('br.gif') no-repeat bottom right;
}
div.rounded div.br div.bl {
    background: url('bl.gif') no-repeat bottom left;
}
div.rounded div.br div.bl div.inner {
    padding: 10px;
}
.button {
    border: 1px solid #999;
     background:#eeeeee url('');
    text-align:center;
}
.button:hover {
    background-color:#c4e2f2;
}

そして、次を使用します。

<div class='round'><div class='br'><div class='bl'><div class='inner'>
<div class='button'><a href='#'>Test</a></div>
</div></div></div></div>

Answer 5

プロパティの背景も継承したくない div を指定します。