如何使用 css 更改 TabPane 选项卡中的子控件样式答案

【问题标题】：How to change sub controls style in a Tab of TabPane using css如何使用 css 更改 TabPane 选项卡中的子控件样式
【发布时间】：2017-10-20 11:44:31
【问题描述】：

我想创建一个带有一些选项卡的 TabPane。如果选择了一个选项卡，它会显示图像（在标题中，而不是内容中），但其他选项卡不会显示图像。我使用 setGraphic 方法添加图像，这是我的代码：

       TabPane tabpane = new TabPane();

        Tab tab = new Tab();
        tab.getStyleClass().add("ctab");

        Label value = new Label();
        value.getStyleClass().add("va");
        tab.setGraphic(value);

        tabpane.getTabs().add(tab);

然后我编写css来设置它的样式：

.va {
    -fx-pref-width: 120;
    -fx-pref-height: 42;
    -fx-font-size: 10pt;
    -fx-text-fill: black;
}

.ctab:selected>.va {
    -fx-pref-width: 120;
    -fx-pref-height: 42;
    -fx-background-image: url("background.jpg");
    -fx-font-size: 10pt;
    -fx-text-fill: black;
}

选项卡已选择，但图像未显示。我对此很困惑。因为当图像在按钮中时，css 可以工作。

    Button button= new Button("a");

    button.getStyleClass().add("abtn");

    Label value = new Label("b");
    value.getStyleClass().add("value");

    Label nest = new Label("s");
    nest.getStyleClass().add("nest");

    value.setGraphic(nest);
    button.setGraphic(value);

    root.getChildren().add(button);

css 是：

.abtn {
    -fx-pref-width: 120;
    -fx-pref-height: 42;

    -fx-font-size: 11pt;
    -fx-text-fill: black;
}

.value {
    -fx-pref-width: 120;
    -fx-pref-height: 42;
    -fx-background-color: #ffffff;
    -fx-font-size: 10pt;
    -fx-text-fill: black;
}


.abtn:hover > .value > .nest {
    -fx-pref-width: 120;
    -fx-pref-height: 42;

    -fx-font-size: 20pt;
    -fx-text-fill: black;

    -fx-background-color: transparent;
}

当鼠标悬停在按钮上时，字符串“s”的大小确实发生了变化。两个例子有什么区别？如何更改标签的图像（使用 css）？

【问题讨论】：

标签： javafx javafx-8

【解决方案1】：

您的Label 不直接归Tab 所有。试试看：

.ctab:selected > .tab-container > .tab-label > .va

如您所见，setGraphic 并不总是用于设置子节点。

JavaFX CSS Reference Guide 帮助您弄清楚控件的结构，但它没有完整的节点列表（例如，TabPane 的tab-container 不在列表中）。

要分析场景图结构，Scene Builder 中的 CSS Analyzer 和 ScenicView 很有用。

或者只是下面的选择器也可以。

.ctab:selected .va

【讨论】：