javaFX css id选择器,类选择器不起作用

GOX*_*LUS 6 css java javafx

编辑(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有关的答案以及孩子们如何从父母那里继承.

ctg*_*ctg 6

首先,您需要了解要尝试设置的组件的结构.如果您还没有,请下载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


GOX*_*LUS 4

我认为这对其他人可能有用,所以我发布了答案。

我想要实现的是:

在此输入图像描述

问题是我有一个 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 中选择所有选项卡