JavaFX如何为ToolBar等特定容器内的指定元素设置CSS样式

1 原代码不生效的原因 #

JavaFX CSS的选择规则和Web CSS存在差异，你写的label小写格式既未指定为样式类选择器（缺少前缀.），也不符合JavaFX类型选择器的大写命名要求，因此无法匹配到Label控件。

2 仅匹配ToolBar内所有Label的实现 #

直接修正选择器即可，使用后代选择器匹配ToolBar默认样式类.tool-bar下所有Label的默认样式类.label：

.tool-bar .label {
    -fx-font-family: Arial;
    -fx-font-size: 15pt;
}

如果仅需要匹配ToolBar的直接子Label、不匹配ToolBar内嵌套容器下的Label，可以改用直接子选择器：

.tool-bar > .label {
    -fx-font-family: Arial;
    -fx-font-size: 15pt;
}

3 任意分组指定样式的通用方案 #

如果你需要给某一组不局限于ToolBar内的特定节点设置样式，推荐使用自定义样式类，灵活度更高：

步骤1：在CSS中定义自定义样式类 #

/* 自定义样式类，可按需添加所有样式规则 */
.custom-group-label {
    -fx-font-family: Arial;
    -fx-font-size: 15pt;
    -fx-text-fill: #333333;
}

步骤2：给目标节点添加样式类 #

• 代码中动态添加：

Label targetLabel = new Label("测试文本");
targetLabel.getStyleClass().add("custom-group-label");

• FXML中静态声明：

<Label text="测试文本" styleClass="custom-group-label" />

如果节点需要同时添加多个样式类，用空格分隔即可。

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