JavaFX TitledPane 双边框使用 css 文件

Question

我有这个代码:

public void start(Stage primaryStage){

    TitledPane titledPane = new TitledPane("TITLE", null);
    titledPane.setContent(new javafx.scene.control.TextArea("Batman"));

    Scene scene = new Scene(titledPane);
    scene.getStylesheets().add(getClass().getClassLoader().getResource("style.css").toExternalForm());

    primaryStage.setScene(scene);
    primaryStage.show();

}

样式.css:

.titled-pane .title,
.titled-pane .content{
    -fx-background-color: white;
    -fx-border-style: solid;
    -fx-border-color: black;
    -fx-border-width: 1px;
}

结果是:

我不明白为什么会出现 2 个边框。

如果我删除 style.css 并使用 setStyle:

public void start(Stage primaryStage){

    TitledPane titledPane = new TitledPane("TITLE", null);
    titledPane.setContent(new javafx.scene.control.TextArea("Batman"));

    Platform.runLater(() -> {

        titledPane.lookup(".title").setStyle("-fx-background-color: white;" +
                                                        "-fx-border-style: solid;" +
                                                        "-fx-border-color: black;" +
                                                        "-fx-border-width: 1px;");

        titledPane.lookup(".content").setStyle("-fx-background-color: white;" +
                                                        "-fx-border-style: solid;" +
                                                        "-fx-border-color: black;" +
                                                        "-fx-border-width: 1px;");

    });

    Scene scene = new Scene(titledPane);
    //scene.getStylesheets().add(getClass().getClassLoader().getResource("style.css").toExternalForm());

    primaryStage.setScene(scene);
    primaryStage.show();

}

现在看起来不错:

为什么使用css文件结果不同？

Answer 1

我发现了问题。这是在CSS

.titled-pane .title,
.titled-pane .content{
   ...
}

这个.titled-pane .content选择所有子节点content的titled-pane ，甚至titled-pane的子节点的子节点

结构titledPane.setContent(new javafx.scene.control.TextArea("Batman"));是:

TitledPane -> title
           -> content = TextArea -> scroll-pane -> content

所以我的CSS都改变了content ，这会导致将边框添加到 scroll-pane -> content

仅修改直接子节点 titledpane -> title和titledpane-> title ，我需要使用> :

.titled-pane > .title,
.titled-pane > .content{
   ...
}