css - 単一の YUI ダイアログ ボタン スタイルのオーバーライド

Question

単一の YUI ダイアログで使用されるボタンのスタイルをオーバーライドしようとしています。を持つcssファイルを作成しました

#mydialog.yui-button {
 // style customization
}   

mydialog はダイアログの ID です。これは動作しません。誰かが私が間違っていることを説明できますか?

Answer 1

セレクターをより具体的にする必要があります。YUIが使用している場合

#wrapper #main #mydialog.yui-button

あなたは次のようなものが必要になります

#wrapper #main a#mydialog.yui-button

このように考えてください

HTML要素=1クラス=10ID=100インラインスタイル=1000

#wrapper=100 + #main=100 + #mydialog=100 + .yui-button=10 = 310
#wrapper=100 + #main=100 + a=1 + #mydialog=100 + .yui-button=10 = 311

それがうまくいかない場合は、いつでも重要なものを追加することに頼ることができます。特異性の代わりに重要事項を使用することは悪い習慣と見なされ、助けられた場合は行われるべきではないことに注意してください。

例：

#mydialog.yui-button{
    color: #000 !important;   
}

常に最後のプロパティ値の後、セミコロンの前。

最後に、それが失敗した場合は、おそらく正しいクラスやIDを持っていません。また、スタイルシートがロードされていることを確認してください。

Answer 2

YUI ボタン​​の CSS クラスが「yui-button」でない場合、ルールは正しくありません。「入力」ではなくボタンに「ボタン」要素を使用していると仮定すると、正しい方法は次のようになります。

#mydialog button {
    // style customization
}

それが役立つことを願っています。