CSS id不起作用

我试图对两个Bootstrap面板的样式略有不同。我决定通过用不同的id命名它们，然后通过CSS来设计它们。出于某种原因，CSS ID选择器不适合我。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我所知道的是自学的，所以我可能会丢失的东西在这里根本。任何帮助表示赞赏，谢谢。

来源

2016-07-13 Michael Bremerkamp

尝试＃price.panel-default代替。（没有空间） – Grainier

您的CSS选择器在price和panel-default之间有一个额外的空间，因此它基本上在id="price"的分区内寻找class="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; 
}

来源

2016-07-13 03:07:40 StaticBeagle

哇，我可以发誓我已经试过了。谢谢！ –

@MichaelBremerkamp我知道这种感觉。很高兴我能帮上忙。 – StaticBeagle

当你把#price之间的空间.panel-default你告诉CSS寻找的id="price"子对象与class="panel-default"。

你想要的是这样的：

#price.panel-default{ 
    ... 
}

没有它找一个对象与class和id两个空间

来源

2016-07-13 03:07:48 Okomikeruko

删除空格：

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

#price .panel-default意味着一些阻滞类别为panel-default，位于ID为price的另一个块中。

来源

2016-07-13 03:09:07

选择CSS时，#size.panel-default与#size .panel-default不同。

#size.panel-default可以选择同时包含ID size和类panel-default元素：

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

而#size .panel-default选择具有panel-default类有一个父元素id为size元素：

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

因此，你的情况正确的CSS将是：

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

来源

2016-07-13 03:09:39 speechless

CSS id不起作用

回答

相关问题