具有不同名称的 JavaFX 2 类具有相同的 css 代码答案

【问题标题】：JavaFX 2 classes with different name have same css code具有不同名称的 JavaFX 2 类具有相同的 css 代码
【发布时间】：2017-01-22 07:11:14
【问题描述】：

????它可能与this 问题重复，但它不起作用。

存在两个类，它们扩展 HBox 并有一个 TextField 元素。我在每个类上添加了一个 StyleClass，如下所示：

//for one class
 getStyleClass().add("search-box");

 //for the other class
 getStyleClass().add("libraries-search-box");

所以我用上面的css代码修改了他们TextField的外观：

.search-box .text-field {
    -fx-background-color: white;    
    -fx-background-insets:3.0;
    -fx-background-radius: 5.0;   
     ..... 
}

.libraries-search-box .text-field {
    -fx-background-color: white;    
    -fx-background-insets:3.0;
    -fx-background-radius: 5.0;   
     ....
}

我想替换重复的代码，我试试：

.search-box , .libraries-search-box .text-field {
     -fx-background-color: white;   
    -fx-background-insets:3.0;
    -fx-background-radius: 5.0;
     ...//   
}

但它仅适用于“.libraries-search-box”。我如何让它对两者都有效？

【问题讨论】：

.text-field 需要在选择器中的父母双方之后

标签： java css javafx

【解决方案1】：

正确的格式是：

.search-box .text-field, .libraries-search-box .text-field {
     -fx-background-color: white;   
    -fx-background-insets:3.0;
    -fx-background-radius: 5.0;
     ...//   
}

在您的示例中，您为 .search-box 和 .libraries-search-box .text-field 类选择器定义了 CSS 属性。

【讨论】：

感谢您的回答！

【解决方案2】：

您需要同时为.search-box 和.text-field 指定.text-field，如下所示：

.search-box .text-field, .libraries-search-box .text-field {
     -fx-background-color: white;   
    -fx-background-insets:3.0;
    -fx-background-radius: 5.0;
     ...//   
}

确实 .search-box , .libraries-search-box .text-field 被视为 .search-box 或 .libraries-search-box .text-field 而不是您所期望的 .search-box .text-field 或 .libraries-search-box .text-field。

【讨论】：

感谢您的回答！