CSS-ID funktioniert nicht

Question

Ich versuche, zwei Bootstrap-Panels etwas anders zu stylen. Ich entschied mich, dies zu tun, indem ich sie mit verschiedenen IDs benannte und sie dann per CSS formatierte. Aus irgendeinem Grund funktioniert der CSS-ID-Selektor nicht für mich. Hier

ist die 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> 

Und die CSS:

#price .panel-default { 

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

#size .panel-default { 

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

die alle CSS/HTML ich weiß, ist Autodidakt so kann ich etwas fehlt hier von grundlegender Bedeutung. Jede Hilfe wird geschätzt, danke.

Answer 1

Ihr CSS-Selektor hat einen extra Raum zwischen price und panel-default so ist es im Grunde für ein Kind mit id="price" mit class="panel-default" in einem div suchen. Um den Selektor nach einem div mit id="price" und class="panel-default" zu suchen, entfernen Sie den Abstand zwischen #price und .panel-default. Versuchen:

#price.panel-default { 

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

#size.panel-default { 

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

Answer 2

Wenn Sie ein Leerzeichen zwischen #price setzen und .panel-default Sie die CSS doch sagen, für ein Kind Objekt von id="price" mit class="panel-default" zu suchen.

Was Sie wollen, ist dies:

#price.panel-default{ 
    ... 
} 

Ohne den Raum es für ein Objekt sucht sowohl mit der Klasse und id

Answer 3

Leerzeichen entfernen:

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

#price .panel-default bedeuten einigen Block mit Klasse panel-default das ist in einem anderen Block mit ID price.

Answer 4

Bei der Auswahl eines CSS unterscheidet sich #size.panel-default von #size .panel-default.

#size.panel-default könnte ein Element auswählen, das sowohl ID enthält size und Klasse panel-default:

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

während #size .panel-default ein Element auswählen, das Klasse panel-default und hat ein Mutterelement mit der ID size:

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

Daher wäre das richtige CSS für Ihren Fall:

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