1

2 つのボタンのスタイルを設定する非常に単純な CSS を作成しました。
最初にパディングが追加されました。2 番目には -fx-background-color が設定されていますが、値は caspian.css から取得されます。これは、設定前の値です。

.first-style { -fx-padding: 20 5 1 5; }

.second-style { -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color; }

この時点で、奇妙な動作が発生します。フォーカス装飾が機能しなくなり、フォーカス時に 2 番目のボタンに青い境界線が表示されません。

ここに画像の説明を入力

何が起こっていますか？

4

1 に答える 1

2

フォーカス リングを機能させるには、2 番目のスタイルに疑似クラスを追加する必要があり:focusedます。それ以外の場合は、2 番目のスタイル クラスでボタンの背景色を再指定するときに上書きするだけです。

サンプル CSS:

.root { -fx-background-color: cornsilk; -fx-padding: 10; }
.first-style { -fx-padding: 20 5 1 5; }
.second-style { -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color; }
.second-style:focused { -fx-background-color: -fx-focus-color, -fx-outer-border, -fx-inner-border, -fx-body-color; }

サンプルアプリ:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;

public class ButtonFocusCss extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage stage) throws Exception {
    VBox layout = new VBox(15);
    Button b1 = new Button("B1");
    b1.getStyleClass().add("first-style");
    Button b2 = new Button("B2");
    b2.getStyleClass().add("second-style");
    layout.getChildren().addAll(b1, b2);
    layout.getStylesheets().add(getClass().getResource("button.css").toExternalForm());
    stage.setScene(new Scene(layout));

    stage.show();
  }
}

アップデート

正直なところ、JavaFX CSS オーバーライド メカニズムがこのように機能する理由を正確に説明することはできません。デフォルトのJavaFX 2.2 caspian.cssを確認し、それがどのように機能するかについての直感に従うことで、ここで答えを得ました。

JavaFX CSS の適用規則に関する現時点での最良の説明は、CSS リファレンス ガイドのセクションCSS および JavaFX シーン グラフにありますが、この例には微妙な点があり、カスケードなどを理解するために一般的な CSS 仕様に目を向ける必要があります。注文と仕様。

于 2012-11-02T23:53:56.700 に答える