JavaFX 和 CSS：防止内部 TabPane 的 [=10th=] 继承

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 class 来定义我的第二种风格。对于那个，我有以下选择器：

.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  (...)

我有一个 "main" TabPane，其中 styleClass="main-tab-pane"。我在这个TabPane旁边我有一个"normal"。

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

但是，所有选项卡都具有 .main-tab-pane > .tab * (...) 的行为！换句话说，.main-tab-pane > .tab 覆盖 .tab.

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

Answer 1

作为建议，您应该使用 Sass 以使其更清晰、更容易。

对于你的问题应该是这样的：

.main-tab-pane .tab {
   color: red;
}
.second-tab-pane .tab {
   color: blue;
}

然后确保您的选项卡元素位于 'mainOrSecond'-tab-pane

的内部

Answer 2

问题可以通过正确使用 >（直接子项）运算符，并遵循 [=27= 中定义的 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;
}

这些 selector 定义每个 Tab 的通用样式和 Tab 的特殊样式，它们是 直接子级 TabPanes 具有 main-tab-pane CSS 风格 class。这意味着，即使您在 "main" 中嵌入另一个 TabPane，指定的 select 或不会 select 嵌入的，因此 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 的默认样式， 就是创建一个第二种样式-class 附加到内部 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，结果是相同的。

JavaFX 和 CSS：防止内部 TabPane 的 [=10th=] 继承

JavaFX and CSS: Prevent CSS inheritence for inner TabPane

css

java

javafx

fxml