Jafa FX CSS Duplicates

Question

我是JavaFX和CSS樣式的新手，剛剛完成以下操作的最佳方式的一些說明。

本質上，我有兩個按鈕，我已實施懸停和焦點，以便邊框顏色在鼠標懸停（鼠標）和聚焦（鍵盤選項卡）上更改。目前，我有以下幾點：

.normalbutton:hover { 

    -fx-font-size: 11pt; 
    -fx-font-family: "Verdana"; 
    -fx-font-weight : Normal; 

    -fx-background-color : #545454; 

    -fx-border-color: #FFFFFF ; 
    -fx-border-radius: 3,3,3,3; 
    -fx-border-width: 1px ; 

} 

.normalbutton:focused { 

    -fx-font-size: 11pt; 
    -fx-font-family: "Verdana"; 
    -fx-font-weight : Normal; 

    -fx-background-color : #545454; 

    -fx-border-color: #FFFFFF ; 
    -fx-border-radius: 3,3,3,3; 
    -fx-border-width: 1px ; 

} 

它工作正常，但如果是結合了集中和懸停，因爲他們具有相同屬性的方式，我想知道婉。

Answer 1

多個選擇器可以在CSS中由,分隔。如果其中一個匹配，則應用該樣式。在您的例子就應該是這樣的：

.normalbutton:hover, 
.normalbutton:focused { 

    -fx-font-size: 11pt; 
    -fx-font-family: "Verdana"; 
    -fx-font-weight : Normal; 

    -fx-background-color : #545454; 

    -fx-border-color: #FFFFFF ; 
    -fx-border-radius: 3,3,3,3; 
    -fx-border-width: 1px ; 

} 

https://www.w3.org/TR/CSS21/selector.html#grouping