css - JavaFX - 相同节点类型的不同 css 类

Question

我正在尝试将两种不同的样式分配给 JavaFX 应用程序的相同类型的节点。

例如，假设我有两个文本节点

<Text text="Welcome" GridPane.columnSpan="2" GridPane.halignment="CENTER" 
        GridPane.rowIndex="0" />
<Text text="Goodbye" GridPane.columnSpan="2" GridPane.halignment="CENTER" 
        GridPane.rowIndex="0" />

和一个 application.css

Text {
    -fx-font-size: 15pt;
    -fx-font-family: Tahoma;
    -fx-font-weight: bold;
}

这样，我将使用相同的类设置两个文本的样式。如何为两个文本实例创建和分配两种不同的样式？

Answer 1

您可以使用 id 属性来区分两个 Text 节点并在它们上应用不同的 CSS

<Text text="Welcome" GridPane.columnSpan="2" GridPane.halignment="CENTER" 
        GridPane.rowIndex="0" id="text1"/>
<Text text="Goodbye" GridPane.columnSpan="2" GridPane.halignment="CENTER" 
        GridPane.rowIndex="0" id="text2"/>

在css文件中，你可以有

#text1{
    -fx-font-size: 10pt;
    -fx-font-family: Tahoma;
    -fx-font-weight: bold;
}

#text2{
        -fx-font-size: 15pt;
        -fx-font-family: Tahoma;
        -fx-font-weight: regular;
}

P.S. 您也可以使用不同的 css 类将两个文本分开。请关注this link了解更多信息