编辑(2016年9月5日):
检查我写的答案..
第1部分
我将这个css用于应用程序的所有TabPanes:
.tab-pane .tab-header-area .tab-header-background {
-fx-opacity: 0.0;
}
.tab-pane{
-fx-tab-min-width:90.0px;
}
.tab-pane .tab{
-fx-background-color: orange;
-fx-background-radius:0.0 20.0 0.0 20.0;
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
.tab-pane .tab:selected{
.....
}
.tab .tab-label {
.....
}
.tab:selected .tab-label {
....
}
Run Code Online (Sandbox Code Playgroud)
第2部分)
但我有一个带有id ="SpecialTabPane"的TabPane,我希望它用不同的css值进行成本化,所以:
#SpecialTabPane.tab{
-fx-background-color:cyan;
-fx-background-radius:20 20 0 0;
-fx-padding:3em 0em 3em 0em;
-fx-cursor:hand;
}
#SpecialTabPane.tab:selected{
-fx-background-color:magenta;
}
Run Code Online (Sandbox Code Playgroud)
问题
第2部分css更改了所有TabPane.为什么会发生这种情况?它必须只选择id ="SpecialTabPane"和class selector =".tab"的 tabPane ...我正在使用Java 1.8_91
编辑:
我找到了与css有关的答案以及孩子们如何从父母那里继承.
首先,您需要了解要尝试设置的组件的结构.如果您还没有,请下载Scenic View并使用它来检查组件,以便您了解a的不同部分是如何TabPane
组织的以及哪些样式适用于不同的部分.
然后,您需要处理选择器,以便找到要更改的特定类.您正在寻找.tab
具有id的组件的后代SpecialTabPane
.您可以使用后代选择器执行此操作,该选择器显示"名为SpecialTabPane的组件下方的选项卡",或者使用查找特定子项的子选择器.
后代选择器将是:
#SpecialTabPane .tab {
Run Code Online (Sandbox Code Playgroud)
注意id和.tab之间的空格,否则你只是将tab类添加到SpecialTabPane本身.
例如,子选择器将是:
#SpecialTabPane > .tab-header-area > * > .tab {
Run Code Online (Sandbox Code Playgroud)
使用子选择器通常可以提供更好的性能,并且更准确,因为它针对特定的组件组合,从而避免了不必要的结果.对于后代版本,您说的是在下面任何位置.tab
出现类的组件必须使用该样式,这可能不是您想要的.SpecialTabPane
我认为这对其他人可能有用,所以我发布了答案。
我想要实现的是:
问题是我有一个 TabPane,它作为子项有另一个 TabPane,所以子项继承了父项的 css 值。
我修改了 css(但在使用它之前,您必须添加以下Java代码):
parentTabPane.setId("SpecialTabPane");
parentTabPaneTab.setId("STab");
Run Code Online (Sandbox Code Playgroud)
CSS代码:
#SpecialTabPane #STab.tab .tab-label{
-fx-text-fill:white;
-fx-rotate:90.0;
}
#SpecialTabPane #STab.tab:selected .tab-label{
-fx-text-fill:white;
}
#SpecialTabPane #STab.tab{
-fx-background-color:black;
-fx-background-radius:20.0 20.0 0.0 0.0;
-fx-padding:3.0em 0.0em 3.0em 0.0em;
-fx-cursor:hand;
-fx-effect: innershadow(two-pass-box, white, 15.0, 0.0, 0.0, 0.0);
}
Run Code Online (Sandbox Code Playgroud)
解释一些css:
我们来说一下这段代码:
#SpecialTabPane #STab.tab
Run Code Online (Sandbox Code Playgroud)
[对于每个具有id 选择器#SpecialTabPane 且具有id选择器#Stab 和类选择器.tab 的子项目的项目,执行此操作......]
这是关键,如果您删除 #STab,它会从父 TabPane 和子 TabPane 中选择所有选项卡