JavaFX：如何让CSS样式强制覆盖FXML中定义的样式？

问题（中文翻译） #

我通过Scene Builder在FXML文件中为节点添加了内联样式，同时给节点设置了样式类。当移除FXML中对应节点的内联样式时，CSS文件里的样式能正常生效，但就算先加载FXML再加载CSS，FXML的内联样式还是会覆盖CSS样式。请问怎么让CSS样式强制覆盖FXML的内联样式？

问题原因 #

JavaFX的样式优先级规则中，内联样式（通过FXML的style属性或代码setStyle()设置）的优先级高于外部CSS文件中的类选择器、ID选择器甚至元素选择器，所以无论CSS加载顺序如何，内联样式都会优先生效。

解决方法 #

1. 移除FXML中的内联样式（推荐）

这是最规范的做法，将结构（FXML）和样式（CSS）分离，便于后续维护。直接删除FXML节点的style属性即可，比如把BorderPane的style="-fx-background-color: lightskyblue;..."删掉，ListView同理。

2. 使用!important强制CSS属性覆盖

在CSS的属性值后添加!important，可以提升该属性的优先级，覆盖内联样式：

.borderPane{
    -fx-background-color : black !important; 
}

#bookListView{
    -fx-background-color : black !important; 
}

注意：!important会打破默认的样式优先级逻辑，过度使用会导致样式难以调试，仅在必要时使用。

3. 代码中清除节点的内联样式

如果无法修改FXML文件，可以在加载FXML后，通过代码清除节点的内联样式，再加载CSS：

@Override
public void start(Stage stage) throws Exception{
    Parent root = FXMLLoader.load(getClass().getResource("/coverAppWithThumbsWithCSS/CoverAppWithThumbsAndCSS.fxml"));  
    
    // 清除BorderPane的内联样式
    BorderPane borderPane = (BorderPane) root;
    borderPane.setStyle(null);
    
    // 清除ListView的内联样式
    ListView<?> listView = (ListView<?>) borderPane.lookup("#bookListView");
    if (listView != null) {
        listView.setStyle(null);
    }
    
    Scene scene = new Scene(root);
    scene.getStylesheets().add(getClass().getResource("coverApp.css").toExternalForm());  
    stage.setTitle("Cover Viewer");
    stage.setScene(scene);
    stage.show();
}

这种方法需要手动处理每个有内联样式的节点，适合临时修复或无法修改FXML的场景。

内容的提问来源于stack exchange，提问作者Jax