CSS IDが機能しない

Question

2つのブートストラップパネルのスタイルを少し違ったものにしようとしています。私は、異なるIDで名前を付けてCSSでスタイルを設定することで、これを行うことにしました。何らかの理由で、CSS idセレクタが私のために働いていません。ここで

はHTMLです：

  <div class="col-md-3"> 
       <div id="price" class="panel panel-default"> 
        <div class="panel-heading"> 
         <h3 class="panel-title">Price</h3> 
        </div> 
        <div class="panel-body">{{ item[0][3] }}</div> 
       </div> 
      </div> 
      <div class="col-md-3"> 
       <div id="size" class="panel panel-default"> 
        <div class="panel-heading"> 
         <h3 class="panel-title">Size</h3> 
        </div> 
        <div class="panel-body">{{ item[0][2] }}</div> 
       </div> 
      </div> 

とCSS：

#price .panel-default { 

    width: 150px; 
    font-size: 18px; 
} 

#size .panel-default { 

    width: 100px; 
    font-size: 188px; 
} 

私が知っているすべてのCSS/HTMLは、自己私はここに根本的な何かが欠落している可能性がありそう教えられています。どんな助けでも感謝しています。

Answer 1

あなたのCSSセレクタは、それが基本的にid="price"とdivの内側class="panel-default"と子を探しているpriceとpanel-default間に余分なスペースがあります。セレクタにid="price"とclass="panel-default"のdivを探すには、#priceと.panel-defaultの間のスペースを削除します。試してみてください：

#price.panel-default { 

    width: 150px; 
    font-size: 18px; 
} 

#size.panel-default { 

    width: 100px; 
    font-size: 188px; 
} 

Answer 2

あなたは#priceと.panel-defaultの間にスペースを入れるときは、class="panel-default"でid="price"の子オブジェクトを探すためにCSSを言っています。何をしたい

はこれです：スペースなしで

#price.panel-default{ 
    ... 
} 

それはクラスとidの両方

Answer 3

で一つのオブジェクトを探しているスペースを削除します。

#price.panel-default 
#size.panel-default 

#price .panel-defaultは、といくつかのブロックを意味し、クラスpanel-defaultは別のブロックにあり、idはpriceです。

Answer 4

CSSを選択する場合、#size.panel-defaultは#size .panel-defaultとは異なります。

<div id="size"> 
    <div class="panel-default"> <-- This is selected --> 
    </div> 
</div> 

：#size .panel-defaultクラスpanel-defaultを有し、ID sizeと親要素を持つ要素を選択しながら

<div id="size" class="panel-default"> <-- This is selected --> 
</div> 

：

#size.panel-defaultは、ID sizeとクラスpanel-default両方を含む要素を選択することができますしたがって、適切なCSSは次のようになります。

#price.panel-default { 
    width: 150px; 
    font-size: 18px; 
} 
#size.panel-default { 
    width: 100px; 
    font-size: 188px; 
}