2010-12-17 7 views
0

<style> 
div#b { 
background-color:blue; 

} 
#b { 
background-color:red; 

} 
</style> 

<div id='a'> div a 
    <div id='b'> 
    div b 
    </div> 
</div> 
 

私はこのスタイルとこのhtmlで2つの質問があります。 div bが青色になるのはなぜですか?私はそれについてもっと学ぶことができるカスケード規則を知りたいですか?私の2番目の質問は、divでdivをdiv内に表示させるためにCSSで行うべきことは何ですか?CSSのカスケード規則に関する問題

+0

「ID」と「クラス」を正しく使用していることを確認してください。何らかの理由で、IDを常に再利用しています。** facepalm ** – Jakub

+0

投稿ごとに1つの質問を残してください。 2つの質問がある場合は、2つの投稿を作成します。 – DwB

答えて

3

CSSセレクタは、特異性に取り組みます。より具体的なセレクタは、そのセレクタ内で定義されたルールが、あまり具体的でないセレクタのために使用されることを意味します。

原則として:例えば等DIV、IMG、として

  • 要素セレクタは、.myClassは、#として10の
  • IDセレクタの重量を運ぶとして1つの
  • クラスセレクタの重量を運びますmyIdは100の重みを持っています。

これで、上記が失敗した理由を簡単に判断できます。いくつかのCSSルールの参照の場合

div#b = 101 
#b = 100 

101> 100

+0

クールな計算 –

3

div#bは、要素セレクタがあるため、#bより具体的です。最初のセレクタは、どの種類の要素を探すかを指定しますが、2番目のセレクタは、そのIDをピックアップする限り重要ではないと言います。

div#b

を意味し、そのID bあるだけdivを探します。

#bは、そのID bある任意の要素を探す

を意味しています。

したがって、具体的には、最初のルールは2番目のルールよりも優先されます。

#b#aの中に表示することが意味することを理解できません。あなたのHTMLがどのように構成されているかはよく分かります。一方、#aのCSSルールはないので、#bの背景色のみです。

EDIT:あなたは別のボックス内のボックスの外観をしたい場合は、外箱にいくつかのパディングを与え、そしてもちろんの背景色:

#a { 
    background-color: yellow; 
    padding: 1em; 
} 
+0

私はdivを緑色にすると、divは緑と青の2つの異なる線で表示されます。青い箱を緑色の箱に入れておきたい。 –

+0

また、div#bがより具体的であると決めた方法を知ることができる場所は、オンラインリファレンスです。 –

+0

特異度スコア[ここ](http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#specificity)の表を見つけることができます。 – BoltClock

0

内部divの幅が外側divの幅(デフォルト)と同じであるため、 "my divs as lines"の問題が発生します。

次のことを試してみてください。

<style> 
div.inside 
{ 
    background-color: red; 
    padding: 5px; 
} 
div.outside 
{ 
    background-color: green; 
    padding: 5px; 
} 
</style> 
<div class="outside"> 
This is text in the outside div. 
<div class="inside"> 
inside 
</div> 
</div> 

あなたは右、左に(5pxの幅約)緑の細い線を見て、内側のdivの下必要があります。 これは、この効果を得る唯一の方法ではありません。