JavaFX 和 CSS : Prevent CSS inheritence for inner TabPane

Question

我希望在我的应用程序中为 TabPane 使用两种样式。因此，我编写了这些 CSS 选择器:

.tab-pane > .tab-header-area > .tab-header-background (...)
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator (...)
.tab-pane > .tab-content-area(...)
.tab (...)
.tab .tab-label (...)
.tab:selected (...)
.tab:hover (...)
.tab:selected .tab-label (...)
.tab:hover .tab-label (...)
.tab:hover (...)

此外，我还引入了一个新的 .main-tab-pane 类来定义我的第二种样式。对于这一点，我有以下选择器:

.main-tab-pane > .tab-header-area (...)
.main-tab-pane > .tab-header-area > .control-buttons-tab (...)
.main-tab-pane > .tab-header-area > .tab-header-background  (...)
.main-tab-pane > .tab  (...)
.main-tab-pane > .tab > .tab-label (...)
.main-tab-pane > .tab:selected  (...)
.main-tab-pane > .tab:hover  (...)
.main-tab-pane > .tab:selected > .tab-label (...)
.main-tab-pane > .tab:hover  (...)

 

我有一个“主”TabPane，其中styleClass="main-tab-pane"。 在这个TabPane里面我有一个“普通”的。

然而，结果并不是我所期望的:第一个 TabPane 获得与 .tab-pane > .tab-header-area > .tab-header- 相对应的样式背景，第二个对应于 .main-tab-pane > .tab-header-area > .tab-header-background  (...)。

但是，所有选项卡都会获得 .main-tab-pane > .tab * (...) 的行为!换句话说，.main-tab-pane > .tab 覆盖.tab。

我的问题是:如何使这两种样式彼此分开，特别是关于选项卡的样式？如果答案涉及 FXML 或 CSS 解决方案，我会更喜欢，但也欢迎 Java 代码。

Answer 1

可以通过正确使用 >(直接子级)运算符并遵循 modena.css 中定义的 TabPane 的 css 结构来解决该问题。 (TabPane 部分):

// For tabs in general
.tab { -fx-background-color: red; }
.tab .tab-label { -fx-text-fill: yellow;}
.tab:hover { -fx-background-color: cyan; }

// Only for the main tab-pane
.main-tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-background-color: blue;
}

.main-tab-pane > .tab-header-area > .headers-region > .tab:hover {
    -fx-background-color: green;
}

.main-tab-pane > .tab-header-area > .headers-region >  .tab > .tab-container >  .tab-label{
    -fx-text-fill: white;
}

这些选择器定义每个 Tab 的通用样式以及作为 TabPanes 的直接子级的 Tab 的特殊样式 具有 main-tab-pane CSS 样式类。这意味着，即使您在“main”选择器中嵌入另一个 TabPane，指定的选择器也不会选择嵌入的选择器，因此 CSS 样式不会被继承。

示例

两个 TabPane 的创建方式如下:

TabPane main = new TabPane();
main.getStyleClass().add("main-tab-pane");
Tab mainTab = new Tab("MainTab");
main.getTabs().add(mainTab);
mainTab.setContent(new TabPane(new Tab("SecondTab")));

结果:未受影响 -> 主选项卡悬停 -> 内部选项卡悬停。

<小时/>

另一种可能性是，如果您不必将第一个样式作为应用程序中所有 TabPane 的默认样式，则需要创建第二个样式-附加到内部 TabPane 的类:

// Main tab-pane
.main-tab-pane .tab { -fx-background-color: blue; }
.main-tab-pane .tab:hover { -fx-background-color: green; }
.main-tab-pane .tab .tab-label {-fx-text-fill: white; }

// Inner tab-pane
.inner-tab-pane .tab { -fx-background-color: red; }
.inner-tab-pane .tab .tab-label { -fx-text-fill: yellow; }
.inner-tab-pane .tab:hover { -fx-background-color: cyan; }

并创建TabPane，例如:

TabPane main = new TabPane();
main.getStyleClass().add("main-tab-pane");
Tab mainTab = new Tab("MainTab");
main.getTabs().add(mainTab);
TabPane secondTab = new TabPane(new Tab("SecondTab"));
secondTab.getStyleClass().add("inner-tab-pane");
mainTab.setContent(secondTab);

对于这两个 TabPane，结果是相同的。