CSS没有级联答案

【问题标题】：CSS not cascadingCSS没有级联
【发布时间】：2012-11-06 01:46:24
【问题描述】：

这是带有行号的 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-horizontal 的表单，它有一个 select_date 标签，用于选择用户生日的日期。 rails 生成的 html 给出了日期编号#user_birthday_3i

我错过了什么？

【问题讨论】：

css 规则：如果 2 个或更多规则集具有冲突的设置，则更“具体”的规则将优先。在您的情况下，这是一次 #userSettingMain .form-horizontal .controls，因为这对匹配规则更具体。

标签： css twitter-bootstrap ruby-on-rails-3 css-cascade

【解决方案1】：

您应该使用!important 以确保使用您设置的边距。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

不是页面中最内层最独特的id吗？
@RailsN00b 不。 #userSettingMain .form-horizontal .controls 说：哦，嘿，CSS 选择器引擎，来这里。 查找 ID 为 userSettingMain 的元素，然后查看该元素的类名为 form-horizontal 的子元素然后从这些中查看班级名称为controls 的孩子。另一条规则只查找具有特定 ID 的元素。