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

回答

相关问题