優先考慮CSS類？

我正在使用Twitter的Bootstrap庫2.0.3版來建立一個網站的原型。我目前使用所提供的模態控制，雖然在線，顯示會是怎樣的一種形式：優先考慮CSS類？

<div class="modal in-layout span6 offset3"> 
    <div class="modal-header"> 
     <h3>Header</h3> 
    </div> 
    <div class="modal-body"> 
     <p>Hello</p> 
    </div> 
    <div class="modal-footer"> 

    </div> 
</div>

我寫我自己的選擇充分利用我的自定義類，.in-layout：

div.modal.in-layout { 
    position: static; 
    top: auto; 
    left: auto; 
    margin-top: 10px; 
    margin-bottom: 10px; 
}

問題是，CSS規則是在一個非常不方便爲了匹配：

enter image description here

從本質上講，我需要.span6和.offset3類的優先級高於.modal，以使我的<div>的邊距爲260px，寬度爲460px。

有什麼辦法可以做到這一點？

來源

2012-05-11 Naftuli Kay

你把它們放在正確的順序？如果它們的重量相同，則最後的規則將優先考慮。如果您絕對要確保規則覆蓋其他所有規則，請使用'！important'。 – kei

有一種製造規則重寫另一個（上市最強到最弱）的3種方式：

重要性，例如作者樣式表中的規則將覆蓋用戶代理樣式表中指定的規則，使用!important規則將覆蓋任何其他規則。
特殊性，規則將覆蓋具有較少特定選擇器的任何其他規則。 Here's an article on the subject.基本上，element.class比.class更具體，但比#id更具體。
訂單，規則將覆蓋其之前的任何其他規則。

除此之外，我發現你的代碼有一些其他問題。在設計網站時，最好使用語義定義（「這意味着什麼」），而不是形式相關的條款（「這應該看起來如何」）。

參考你的代碼具體地說，被命名你的類名span6，in-layout和offest3，在那裏你應該有類似warning-modal，information-header或error-footer，傳達出的元素的含義（畢竟HTML的唯一目的是給你的文字上下文）。

一旦你想到這些條款，爲你的元素設計樣式會容易得多。

來源

2012-05-11 19:52:01

我正在使用Bootstrap，它提供了這些類。你應該在Github上就他們可怕的類命名策略向他們提出問題:) –

@TKKocheran：我個人不使用Twitter Boostrap，我從頭開始寫自己的代碼。我越來越好，這種方式更高質量的結果。 –

你還必須有無限的時間陪伴那無情的完美主義;） –

只要把他們.modal規則後或重複你.span6和.offset3需要的規則在你div.modal.in-layout。

來源

2012-05-11 19:51:37 Shomz

優先考慮CSS類？

回答

相關問題