JavaFX:多个TabPane的自定义样式

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">

有人能告诉我正确的方向吗。

我也尝试过遵循这个想法，但由于未选择选项卡的颜色，无法实现：如何在代码中设置JavaFX TabPane CSS？

附言：我是CSS的新手。如果这是个愚蠢的问题，我深表歉意。欢迎提出任何建议。

Answer 1

创建一个简单的TabPane并添加样式类：

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选项卡最小宽度：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 */
}