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

Question

编辑（2016年9月5日）：

检查我写的答案..

  

第1部分

我对应用的所有TabPanes使用此css ：

.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 { 
  ....
 }

  

第2部分）

但是我有一个 TabPane ，带有 id =＆＃34; SpecialTabPane＆＃34; ，我希望它用不同的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;
 }

  

问题

第2部分css更改了所有TabPane。为什么会发生这种情况？它必须只选择tab = id =＆＃34; SpecialTabPane＆＃34;和类选择器=＆＃34; .tab＆＃34; ...我正在使用Java 1.8_91

修改

我找到了与css有关的答案，以及孩子们如何从父母那里继承。

Answer 1

首先，您需要了解要尝试设置的组件的结构。如果您还没有，请下载Scenic View并使用它来检查组件，以便了解TabPane的不同部分是如何组织的以及哪些样式适用于不同的部分。

然后，您需要处理选择器，以便找到要更改的特定类。您正在寻找.tab，它是ID为SpecialTabPane的组件的后代。您可以使用后代选择器执行此操作，后者在名为SpecialTabPane＆＃34;的组件下方的任何位置显示选项卡，或者使用寻找特定子项的子选择器。

后代选择器将是：

#SpecialTabPane .tab {

注意id和.tab之间的空格，否则你只是将tab类添加到SpecialTabPane本身。

子选择器可以是，例如：

#SpecialTabPane > .tab-header-area > * > .tab {

使用子选择器通常可以提供更好的性能，并且更准确，因为它针对特定的组件组合，从而避免了不必要的结果。对于后代版本，您说在.tab下面任何位置的类SpecialTabPane的组件必须使用该样式，这可能不是您想要的。

Answer 2

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

我想要实现的目标是：

问题是我有一个TabPane，它有一个孩子另一个TabPane，所以孩子继承了父母的css值。

我修改了css（但在使用之前你必须添加这个 Java 代码）：

parentTabPane.setId("SpecialTabPane");
parentTabPaneTab.setId("STab");

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);
}

  

解释一些css：

让我们说这段代码：

#SpecialTabPane #STab.tab

[对于 id选择器 #SpecialTabPane的每个项目，其子项目 id #Stab和类选择器 .tab执行此操作.. ......]

这是关键，如果你删除#STab，它会选择父TabPane和Children TabPanes的所有标签