[解決済み] jQueryのダイアログボタンにCSSを適用する

質問

現在、2つのボタンを持つjQueryダイアログを持っています。保存と閉じる。私は以下のコードを使用してダイアログを作成します。

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

しかし、このコードを使用すると、両方のボタンが同じ色になります。私は、キャンセルボタンを保存ボタンと異なる色にしたいのです。組み込みの jQuery オプションを使用して、これを行う方法はありますか? 私はドキュメントからあまり助けを得ませんでした。

私が作成しているキャンセルボタンはあらかじめ定義されたタイプですが、「保存」は私自身が定義していることに注意してください。それが問題に関係するかどうかはわかりません。

どんな助けでも感謝します。ありがとうございます。

UPDATEです。 ここでは、2つの道があるというのがコンセンサスでした。

1. のような Firefox プラグインを使用して HTML を検査する。 のようなプラグインを使用して ファイアバグ のようなFirefoxプラグインを使用してHTMLを検査し、以下の点に注意してください。 jQueryがボタンに適用しているCSSクラス がボタンに適用しているCSSクラスに注目し、それを をオーバーライドしてください。 注意: 私の 私のHTMLでは、両方のボタンにまったく同じCSSクラスが使用されています。 全く同じCSSクラスが使用されており、ユニークな IDがないので、このオプションは除外されました。
2. ダイアログを開く際にjQueryのセレクタを使用し を使って、欲しいボタンをキャッチ。 そして、それにCSSクラスを追加します。

私は2番目の選択肢を選び、jQueryのfind()メソッドを使いました。これは:firstや:first-childを使うよりも適切だと思うので、私が変更したかったボタンは必ずしもマークアップにリストされた最初のボタンではなかったからです。findを使えば、ボタンの名前を指定するだけで、CSSを追加することができるのです。私が最終的に作成したコードは以下の通りです。

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: {
        Cancel: function() {
                        // Cancel code here
        },
        'Save': function() {
                        // Save code here
        }
    },
        open: function() {
            $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass');
        }
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});

どのように解決するのですか？

再投稿しています 私の答え を再投稿します。なぜなら、誰もここで回答していないようですし、その方がずっとすっきりしているからです。

代替の buttons プロパティの構文を使用します。

$dialogDiv.dialog({
    autoOpen: false,
    modal: true,
    width: 600,
    resizable: false,
    buttons: [
        {
            text: "Cancel",
            "class": 'cancelButtonClass',
            click: function() {
                // Cancel code here
            }
        },
        {
            text: "Save",
            "class": 'saveButtonClass',
            click: function() {
                // Save code here
            }
        }
    ],
    close: function() {
        // Close code here (incidentally, same as Cancel code)
    }
});