0

これは、行番号付きの 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 は、ユーザーの誕生日の日付を選択するための select_date タグを持つ .form-horizo​​ntal を含むフォームです。rails が生成する html は、日番号 #user_birthday_3i を与えます

私はこれで何を逃したのですか？

4

3 に答える 3

4

CSS がカスケードしているのは、どのルールが最初に来るかではなく、具体性です。#userSettingMain .form-horizontal .controlsルールは、より多くのセレクター (オブジェクト ツリーのより多くの「深さ」をカバーする) を持つという点で、ルールよりも具体的#user_birthday_3iであるため、オーバーライドされます。

2 番目のもので最初のものをオーバーライドしたい場合は、定義!importantの最後に追加します。margin

#user_birthday_3i {
    margin-left: 0px !important;
}
于 2012-11-17T15:02:59.590 に答える
1

!important設定したマージンが確実に使用されるようにするために使用する必要があります。

16    #user_birthday_3i{
17    
18      margin-left: 0px !important;
19    }
于 2012-11-17T15:01:49.773 に答える
1

CSS は、宣言された順序でカスケードするのではなく、特定性を高めながらカスケードします。したがって、#userSettingMain .form-horizontal .controlsルールはより具体的です。つまり、より具体的なルールが選択されます#user_birthday_3i。

特異性の計算方法については、http://www.w3.org/TR/CSS2/cascade.html#specificityを参照してください。

于 2012-11-17T15:02:45.793 に答える