CSS不是级联的

这是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_birth_3i

---

我遗漏了什么？

您应该使用

！重要信息

，以确保使用您设置的边距

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

---

你应该使用

！重要信息

，以确保使用您设置的边距

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

---

CSS并不是按照事物被声明的顺序进行级联的，而是不断增加的特定性。因此，您的

#userSettingMain.form horizontal.controls

规则比您的

#user\u birth\u 3i

规则更具体，这意味着它选择了更具体的规则

---

有关如何计算特定性的规则，请参阅。

CSS不会按照声明的顺序级联，而是通过级联增加特定性。因此，您的

#userSettingMain.form horizontal.controls

规则比您的

#user\u birth\u 3i

规则更具体，这意味着它选择了更具体的规则

---

有关如何计算特定性的规则，请参阅。

CSS的层叠不是关于哪些规则首先出现，而是关于。

#userSettingMain.form horizontal.controls

规则比

#user\u birth\u 3i

规则更具体，因为它有更多的选择器（覆盖对象树中更多的“深度”），因此它会覆盖它

如果确实希望第二个覆盖第一个，请添加

！重要信息

至

页边距的末尾

定义：

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

---

CSS的层叠不是关于哪些规则首先出现，而是关于。

#userSettingMain.form horizontal.controls

规则比

#user\u birth\u 3i

规则更具体，因为它有更多的选择器（覆盖对象树中更多的“深度”），因此它会覆盖它

如果确实希望第二个覆盖第一个，请添加

！重要信息

至

页边距的末尾

定义：

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

---

css规则：如果两个或两个以上的规则集具有冲突的设置，则更“特定”的规则将优先。在您的例子中，这是一次

#usersetingmain.form horizontal.controls

，因为这在匹配规则中更为具体。css规则：如果两个或多个规则集具有冲突的设置，则更“具体”的规则将优先。在您的例子中，这是一次

#userSettingMain.form horizontal.controls

，因为这在匹配规则中更为具体。页面中最内部和唯一的id不是最具体的吗？@RailsN00b Nope

#userSettingMain.form horizontal.controls

说：哦，嘿，CSS选择器引擎，过来。查找ID为userSettingMain的元素，然后查看该元素中类名为水平的子元素，然后从这些子元素中查看具有classname

控件的子元素。另一条规则只查找具有特定ID的元素。页面中最内部和唯一的ID不是最特定的吗？@RailsN00b否
#userSettingMain.form horizontal.controls
说：哦，嘿，CSS选择器引擎，过来。查找ID为userSettingMain的元素，然后查看该元素中类名为水平的子元素，然后从这些子元素中查看具有classname
控件的子元素。另一个规则只查找具有特定ID的元素。