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-horizo​​ntal .controls 规则比 #user_birthday_3i 规则更具体，因为它有更多的选择器(包括对象树中的更多“深度”)因此它会覆盖它。

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

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