CSS没有级联

Question

这是usersettings.css.erb的一部分，其中包含行号

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

然而，当我进入页面时，当我检查

时，它会渲染第一个规则而不是最后一个规则

html是一个带有.form-horizo​​ntal的表单，它有一个select_date标记，用于选择用户生日的日期。 rails生成的html给出了日期号＃user_birthday_3i

我在这里错过了什么？

Answer 1

CSS级联不是关于哪个规则首先出现，而是关于specificity。 #userSettingMain .form-horizontal .controls规则比#user_birthday_3i规则更强特定，因为它有更多选择器（在对象树中覆盖更多“深度”），因此它会覆盖它。

如果您确实希望第二个覆盖第一个，请将!important添加到margin定义的末尾：

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

Answer 2

您应该使用!important来确保使用您设置的保证金。

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

Answer 3

CSS不按照声明事物的顺序级联，它们会逐渐降低特异性。因此，您的#userSettingMain .form-horizontal .controls规则比您的#user_birthday_3i更具体，这意味着它会选择更具体的规则。

有关如何计算特异性的规则，请参阅http://www.w3.org/TR/CSS2/cascade.html#specificity。