たいのですが無効に継承されcssスタイル?

StackOverflow https://stackoverflow.com/questions/1046872

  •  20-08-2019
  •  | 
  •  

質問

私の作成コンテナ丸いコーナーは、次のメソッドを使用して:

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;
}

現在利用したい部内にコンテナ:

.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>

しかし、たいの部門の中に入れ子divs、ボタンは、blのイメージのコーナー。

表示されてい受け継がれていく背景ではないですか。

役に立ちましたか？

解決

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

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

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

その理由は、あなたがルールを作るときdiv.rounded div divそれはdivのクラスにrounded内div.rounded div > div内にネストのすべてのの<=>要素を意味するからです、< em>の関係なく、ネストのの

あなたが唯一の直接の子孫だのdivをターゲットにする場合（これが唯一のより最近のブラウザでサポートされていますが）

、あなたは<=>構文を使用することができます。

//www.alistapart：

ところで、あなたは通常、<のhref = "HTTPと呼ばれる技術を使用することにより、2つだけ<=> S（上下または左右どちらかに1つずつ）を使用するには、この方法を簡素化することができます.COM /記事/ slidingdoorsは/」のrel = "noreferrer">スライドドアのます。

他のヒント

カスケーディング・スタイル・シートは、継承のために設計されています。継承は、彼らの存在に固有のものです。それがカスケードされるように構築されていなかった場合、彼らは唯一の「スタイルシート」と呼ばれることになります。

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

また、すべての個々のオブジェクトにスタイルを与えることによって、よりきめ細かなソリューションを選択することができ、そして

などのdiv、P、事前に、のような一般的なタグにスタイルを与えていません

たとえば、特定の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>

それがお役に立てば幸いです。

きれいな解決策は、正確な子供として、あなたの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;
}

あなたは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>

のdivいたの財産を継承 背景 ます。

最も簡単なのはdiv要素のすべてのクラスIFYにあります 

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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top