JavaFX和CSS：防止内部TabPane的CSS继承

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"。我 nside this TabPane 我有一个“正常”的。

然而，结果并非我期望的结果：第一个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会覆盖<div style="height: 20%" > <angular2-fullcalendar id="myCalendar" [options]="calendarOptions"></angular2-fullcalendar> </div> 。

我的问题是：我怎么能将这两种风格彼此分开，特别是关于标签的风格？如果答案涉及FXML或CSS解决方案，我更喜欢它，但也欢迎使用Java代码。

Answer 1

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

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

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

然后确保您的标签元素位于＆＃39; mainOrSecond＆＃39; -tab-pane

的内部

Answer 2

通过正确使用>（直接子节点）运算符，并遵循modena.css中定义的TabPane的css结构，可以解决问题（{{1} }）：

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的{​​{1}}的特殊样式，Tab的{​​{1}}具有TabPanes 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")));

结果：未触及 - ＆gt;主标签悬停 - ＆gt;内部标签悬停。

另一种可能性是，如果您不必将第一个样式作为应用程序中所有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，结果是相同的。