css - 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 级联不是关于哪些规则在先，而是关于特异性。规则比#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。