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不起作用

回答

相關問題