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

Question

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

Two classes exist which extend HBox and have one TextField element.I have added on each one a StyleClass like this:

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

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

So i am modifing the appearence of their TextField with the above css code:

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

I want to replace the duplicate code and i try:

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

但它仅适用于“.libraries-search-box”。我如何让它同时适用于两者？

Answer 1

您需要为.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。