JavaFx：CSS 元素无法继承其 ID 的属性

Question

我用 JavaFx 创建了一个选项菜单，并用 CSS 设计了它的样式。我使用 FXML 来设计选项 window。在选项 window 中，我在顶部创建了一个 label 并为其指定了 ID“title”。 以下是我的 FXML 代码和 CSS 代码：

*{
 -fx-font-size: 14px;
    font-size: 14px;
 }

 
#title{
    -fx-font-size: 20px;
    font-size: 20px;
    -fx-text-fill: #35568c;
}

Label 的 FXML：

<Label id="title" alignment="CENTER" contentDisplay="CENTER" layoutX="80.0" layoutY="14.0" prefHeight="31.0" prefWidth="200.0" styleClass="big" text="Options">
         <font>
            <Font name="Bell MT Bold" size="20.0" />
         </font>
      </Label>

我的 output 的问题是 label 应该从 CSS 的#title 部分继承属性，但相反，它从 * 部分继承字体大小，从 #title 部分继承文本填充。

output截图

编辑：

我将 #title 的 CSS 代码更改为

#title{
    -fx-font: 20 'Bell MT';
    font: 20 'Bell MT';
    -fx-text-fill: #35568c;
}

现在我的代码可以正常工作了。 我将 -fx-font-size 更改为 -fx-font。 但我仍然不明白为什么 font-size 不起作用。

Answer 1

无需设置非 JavaFX CSS 属性，如font而不是-fx-font ，那些非 JavaFX CSS 属性将被忽略（或可能导致问题）。

如果您在 FXML 中设置字体（不推荐），那么我认为这通常会覆盖您在 CSS 中设置的值。

通常，对于 styles 之类的标题，最好使用样式 class 而不是 id。

我不认为使用*通用选择器是个好主意。 也许没关系，也许不是。 标准 JavaFX modena.css样式表默认使用.root的语法，也许这对您来说更好。

Scene JavaFX CSS中root样式class的描述：

场景 object 没有可设置的 CSS 属性，也没有任何伪类。 然而，场景的根节点被分配了样式 class “root”（除了已经分配给节点的样式类）。 这很有用，因为场景的根节点是所有活动场景图节点的根容器。 因此，它可以作为继承或查找的属性的容器。

此外，您标记了您的问题 javafx-8。 JavaFX 8 已过时，建议使用更现代的版本 JavaFX。

更改默认值 colors

如果您想更改应用程序的默认值 colors，那么您可以通过覆盖默认modena.css样式表的.root部分中定义的查找 colors 来实现。

您可能会覆盖的主要查找颜色是-fx-base ，它为整个应用程序设置默认颜色样式。

如果您想了解有关查找 colors 的更多信息，请研究 JavaFX CSS 参考资料。

例如，以下样式表规则将默认字体大小设置为 20，并将标签中文本的默认颜色设置为深绿色。

.root {
    -fx-font-size: 20;
    -fx-text-background-color: darkgreen;
}

示例应用程序

该示例在.root部分中定义了应用程序中文本的默认大小。 默认样式大小在.title部分被覆盖，因此标题可以更大。 示例应用程序需要 JavaFX 17+。

示例应用程序未设置默认值 colors，但如果您想这样做，您可以通过更改提供的 CSS 以匹配答案的默认 colors 部分中的 CSS 进行试验。

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

public class RootFontSizeApp extends Application {

    public static final String CSS = "data:text/css," + // language=CSS
            """
            .root {
                -fx-font-size: 20;
            }
            
            .title {
                -fx-font-size: 30;
            }
            """;

    @Override
    public void start(Stage stage) throws Exception {
        Label title = new Label("Greetings earthlings");
        title.getStyleClass().add("title");

        Scene scene = new Scene(
                new VBox(20,
                        title,
                        new Label("hello, world")
                )
        );
        scene.getStylesheets().setAll(CSS);

        stage.setScene(scene);
        stage.show();
    }

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