JavaFX：多个 TabPanes 的自定义样式

Question

我有一个 TabPane，我通过 CSS 为其设置了样式。但是，我想在另一个屏幕上使用不同的 TabPane 样式（对于选定和未选定的选项卡）。以下代码是我在为所有 TabPane 使用通用样式时所做的工作。

.tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

.tab-pane
{
    -fx-tab-min-width:90px;
}

.tab{
    -fx-background-insets: 0 1 0 1,0,0;
}
.tab-pane .tab
{
    -fx-background-color: #abe0ff;

}

.tab-pane .tab:selected
{
    -fx-background-color: #015A7C;
}

.tab .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: #3c3c3c;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
}

.tab:selected .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: white;
}

.tab-pane:top *.tab-header-area {
    -fx-background-insets: 0, 0 0 1 0;
    /* -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
    -fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}

在尝试将其设置为不同颜色的情况下，我尝试了以下但未成功的尝试：

.MyTabPane > .tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

.MyTabPane > .tab-pane
{
    -fx-tab-min-width:90px;
}

.MyTabPane > .tab{
    -fx-background-insets: 0 1 0 1,0,0;
}

.MyTabPane > .tab-pane .tab
{
    -fx-background-color: #e8e8e8;

}

.MyTabPane > .tab-pane .tab:selected
{
    -fx-background-color: #c0c0c0;
}

.MyTabPane > .tab .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: #3c3c3c;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
}

.MyTabPane > .tab:selected .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: white;
}

.MyTabPane > .tab-pane:top *.tab-header-area {
    -fx-background-insets: 0, 0 0 1 0;
    /* -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
    -fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}

这是来自我的 FXML :

<TabPane fx:id="tabPane" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" GridPane.rowIndex="1" styleClass="MyTabPane">

谁能给我指出正确的方向。

我也试过遵循这个想法，但是对于未选择的选项卡的颜色无法通过：

P.S。我对 CSS 很陌生。如果这是一个愚蠢的问题，我深表歉意。欢迎提出任何建议。

Answer 1

创建一个简单的 TabPane 并添加样式 class:

    TabPane tabPane = new TabPane();
    tabPane.getStyleClass().add("MyTabPane");
    Tab tab1 = new Tab("Page 1", new Label("Page 1"));
    Tab tab2 = new Tab("Page 2", new Label("Page 2"));
    Tab tab3 = new Tab("Page 3", new Label("Page 3"));
    tabPane.getTabs().addAll(tab1, tab2, tab3);

在CSS中：

.MyTabPane .tab-pane .tab-header-area .tab-header-background {
    -fx-opacity: 0;
}

.MyTabPane .tab-pane {
    -fx-tab-min-width: 90px;
}

.MyTabPane .tab {
    -fx-background-insets: 0 1 0 1, 0, 0;
}

.MyTabPane .tab-pane .tab {
    -fx-background-color: #e8e8e8;
}

.MyTabPane .tab-pane .tab:selected {
    -fx-background-color: #c0c0c0;
}

.MyTabPane .tab .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: #3c3c3c;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
}

.MyTabPane .tab:selected .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: red;
}

.MyTabPane .tab-pane:top *.tab-header-area {
    -fx-background-insets: 0, 0 0 1 0;
    /* -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
    -fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}

Answer 2

遇到此问题的任何人都可以参考以下代码。原来我没有正确使用选择器：

FXML :

<TabPane fx:id="tabPane" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" GridPane.rowIndex="1" styleClass="MyTabPane">

CSS : .MyTabPane { -fx-tab-min-width:90px; }

.tab{
    -fx-background-insets: 0 1 0 1,0,0;
}
.MyTabPane .tab
{
    -fx-background-color: #e8e8e8;
}

.MyTabPane .tab:selected
{
    -fx-background-color: #c0c0c0;
}

.tab .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: #3c3c3c;
    -fx-font-size: 14px;
    -fx-font-weight: bold;
}

.tab:selected .tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: white;
}

.MyTabPane:top *.tab-header-area {
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}

JavaFX：多个 TabPanes 的自定义样式

JavaFX : Custom styling for multiple TabPanes

css

tabs

javafx