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

Question

它似乎与this重复，但它不起作用。

两类存在延伸HBox，并有一个TextField element.I对每一个StyleClass这样说：

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

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

，所以我对矫正他们的TextField的appearence与上面的css代码：

.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”。怎么我得到得到它都工作？

Answer 1

你需要指定.text-field既.search-box和.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。

Answer 2

的正确格式为：

.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属性。