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

Question

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

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

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

标签的 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>

我的输出的问题是标签应该从 CSS 的#title 部分继承属性，但相反，它从 * 部分继承 font-size，从 #title 部分继承 text-fill。

Screenshot of output

编辑：

我将#title 的CSS 代码更改为

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

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

Answer 1

不需要像font那样设置non-JavaFXCSS属性而不是-fx-font，那些non-JavaFXCSS属性只会被忽略（或可能导致问题）。

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

一般来说，对于像标题这样的样式，最好使用样式 class 而不是 id。

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

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

The Scene object has no settable CSS properties, nor does it have any pseudo‑classes. However, the root node of the scene is assigned the style class "root" (in addition to style classes already assigned to the node). This is useful because the root node of Scene is the root container for all active scene‑graph nodes. Thus, it can serve as a container for properties that are inherited or looked up.

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

更改默认颜色

如果您想更改应用程序的默认颜色，则可以通过覆盖默认 modena.css 样式的 .root 部分中定义的 looked-up 颜色来实现sheet.

您可以覆盖的主要 looked-up 颜色是 -fx-base，它设置了整个应用程序的默认颜色样式。

如果您想了解有关 looked-up 颜色的更多信息，请学习 JavaFX CSS 参考资料。

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

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

示例应用程序

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

示例应用程序不设置默认颜色，但是，如果你想这样做，你可以通过更改提供的 CSS 以匹配默认颜色部分中的 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);
    }
}

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

JavaFx: CSS element unable to inherit properties of it's ID

css

java

javafx

javafx-8