そこで、次の方法を使用して、角が丸いコンテナを作成しています。
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画像が表示されます。
継承された背景画像を削除するにはどうすればよいですか?
簡単な答えは、変更することです
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つのdiv
s(上下または左右に1つずつ)のみを使用して、 Sliding Doors と呼ばれる手法を使用できます。
カスケードスタイルシートは継承用に設計されています。継承はそれらの存在に固有のものです。カスケードするように構築されていない場合、それらは「スタイルシート」とのみ呼ばれます。
ただし、継承されたスタイルがニーズに合わない場合は、オブジェクトに近い別のスタイルでそれをオーバーライドする必要があります。 「ブロッキング継承」の概念を忘れてください。
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>
それが役に立てば幸い。
最もクリーンなソリューションは、おそらく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.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>
あなたが彼にプロパティを継承させたくないdivを与えてくださいbackgroundも。