带有类选择器的javaFX css id选择器不起作用答案

【问题标题】：javaFX css id selector with class selector not working带有类选择器的javaFX css id选择器不起作用
【发布时间】：2016-08-24 11:37:25
【问题描述】：

编辑（9/05/2016）：

检查我写的答案..

第 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 部分）

但是我有一个带有 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;
 }

问题

第 2 部分 css 更改了所有 TabPanes。为什么会这样？它必须只选择 id="SpecialTabPane" 和类选择器=".tab"的 tabPane ...我使用的是 Java 1.8 _91

编辑：

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

【问题讨论】：

你能创建一个minimal reproducible example吗？看起来它应该可以工作，但是给标签窗格一个样式类tab有点奇怪；因为各个选项卡已经具有该类。
@James_D 我想让具有此 ID 的 TabPane 与其他 TabPane 不同，在这里我只为选项卡提供 css，但我也想更改其他内容，例如旋转选项卡的文本标签，但是我只希望这个 TabPane 使用它。实际上，如果 ID 和 .tab 之间没有空格，第 2 部分代码根本不起作用...谢谢您的帮助。
但正如您所说，您将 id 应用于 tab 窗格，而不是 tab。除非您将样式类 tab 显式添加到 选项卡窗格（这很奇怪），否则选择器实际上不应选择任何内容。发布minimal reproducible example。
@James_D 我试图理解 .tab 或 .tab .text-label 是在 javaFX 中构建的？在带有 html 的 css 中，如果我使用选择器 p 正在选择所有段落，但在这里我必须使用 .tab这是如何在 javaFX 内部工作的。如果我创建一个新控件，如果它有子控件，例如带有子控件文本的圆圈，我该怎么做？

标签： java css javafx

【解决方案1】：

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

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

后代选择器是：

#SpecialTabPane .tab {

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

子选择器将是，例如：

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

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

【讨论】：

我会检查这个并...感谢您的帮助
我找到了我想要的！

【解决方案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 和子 TabPane 中选择所有选项卡

【讨论】：