CSS層疊不

這是行號usersettings.css.erb的一部分CSS層疊不

11 #userSettingMain .form-horizontal .controls { 
12  
13  margin-left: 30px; 
14 } 
15  
16 #user_birthday_3i{ 
17  
18  margin-left: 0px; 
19 }

然而，當我去的網頁它呈現的第一個規則，而不是最後一個，當我檢查

chrome inspect

html是一個帶有.form-horizontal的窗體，它有一個select_date標記用於爲用戶生日選擇一個日期。 rails生成的html給出了天數＃user_birthday_3i

我在這裏錯過了什麼？

來源

2012-11-17 Nick Ginanto

CSS規則：如果2個或更多的規則集有衝突的設置，更「具體」規則將優先。在你的情況下，這是'#userSettingMain .form-horizontal .controls'一次，因爲這在匹配規則上更具體。 –

CSS級聯並不是關於哪個規則先來，它是關於specificity。 #userSettingMain .form-horizontal .controls規則更具有特定規則比#user_birthday_3i規則，方式是它有更多的選擇器（覆蓋對象樹中更多'深度'），因此它覆蓋它。

如果你真的想第二個覆蓋第一，加!important到margin定義的末尾：

#user_birthday_3i { 
    margin-left: 0px !important; 
}

來源

2012-11-17 15:02:59 Chris

是不是一個最內在和最獨特的頁面中最具體的ID？ –

@ RailsN00b Nope。 '#userSettingMain .form-horizontal .controls'說：*哦，嘿，CSS選擇器引擎，來這裏。*尋找一個ID爲'userSettingMain'的元素，然後看看那個元素的子元素是'form-horizontal **然後從那些**看看classsname'controls'的孩子。另一個規則只查找具有特定ID的元素。 – Chris

您應該使用!important來確保您設置的邊距被使用。

16 #user_birthday_3i{ 
17  
18  margin-left: 0px !important; 
19 }

來源

2012-11-17 15:01:49

CSS不會按照事物聲明的順序級聯，它們會級聯增加特異性。因此，您的#userSettingMain .form-horizontal .controls規則比您的#user_birthday_3i更具體，這意味着它會選擇更具體的規則。關於如何計算特異性的規則，請參閱。

來源

2012-11-17 15:02:45 Xymostech

回答

相關問題