web-dev-qa-db-ja.com

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

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

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画像が表示されます。

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

htmlcssstylesheet
29
Jack B Nimble

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

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

に

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

理由は、div.rounded div divのルールを作成すると、everydiv要素がdiv内にネストされるためです。 divのクラスを持つrounded内、ネストに関係なく。

直接の子孫であるdivのみを対象とする場合は、div.rounded div > div構文を使用できます（ただし、これは最近のブラウザーでのみサポートされています）。

ちなみに、通常、このメソッドを単純化して、2つのdivs（上下または左右に1つずつ）のみを使用して、 Sliding Doors と呼ばれる手法を使用できます。

11
Aupajo

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

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

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>

それが役に立てば幸い。

8
Wadih M.

最もクリーンなソリューションは、おそらく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;
}
7
zombat

HTMLとCSSの両方を制御する場合、丸い角に必要なすべてのdivでIDの使用に切り替えることをお勧めします。

CSS

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

HTML

<div id="d1"><div id="d2"><div id="d3"><div id="d4">
    <div class='button'><a href='#'>Test</a></div>
</div></div></div></div>
2
acrosman

最も簡単なのは、すべての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>
0
DreadPirateShawn

あなたが彼にプロパティを継承させたくないdivを与えてくださいbackgroundも。

0
Itay Moav -Malimovka