具有不同名稱的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屬性。