css class 在 javafx 中的优先级如何

Question

我想通过示例为我的组件添加另一个 css class

.item{
-fx-background-color:blue;
-fx-border-radius:5;
}
.item-some{
-fx-background-color:red;
}

在我的代码中

control.getStyleClass().addAll("item","item-some");

但是我的控件只有 "item-some" 样式我只想覆盖应用第二个 class 的颜色，就像在网络上的 css 一样，有人可以帮助我或给我一个 link 读一下？谢谢。

Answer 1

这基本上符合我的预期：具有两种样式类的项目获得为两个选择器定义的属性。如果存在冲突，例如本例中的 fx-background-color，则稍后在 css 文件中定义的冲突会覆盖之前的冲突。

这是一个完整的测试：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Region;
import javafx.stage.Stage;

public class MultipleStyleClassTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        Region region1 = new Region();
        Region region2 = new Region();
        region1.getStyleClass().add("style-class-1");
        region2.getStyleClass().addAll("style-class-1", "style-class-2");

        HBox root = new HBox(region1, region2);

        Scene scene = new Scene(root);
        scene.getStylesheets().add("multiple-style-class-test.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

multiple-style-class-test.css 是

.style-class-1 {
    -fx-min-width: 300 ;
    -fx-min-height: 400 ;
    -fx-background-color: blue ;
    -fx-background-radius: 25 ;
}

.style-class-2 {
    -fx-background-color: red ;
}

结果是

可以看出，region1 和 region2 都获得了为 style-class-1 定义的 -fx-min-height、-fx-min-width 和 -fx-background-radius 属性. region1 获取为 style-class-1 定义的 -fx-background-color； region2 显示为 style-class-2 定义的背景颜色。

css class 在 javafx 中的优先级如何

how about css class prescedence in javafx

css

javafx

operator-precedence