Jafa FX CSS Duplicates

Question

私はJavaFXとCSS Stylingを初めて使用しています。これは、以下のような最適な方法を明確にした直後です。

本質的に、私はホバーとフォーカスを実装しているので、ホバー（マウス）とフォーカス（キーボードタブ）の両方でボーダーカラーが変わります。現在、私は以下の持っている：

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

} 

それが正常に動作しますが、両方の集中を組み合わせて、それらが同じ性質を持っているようホバーする方法があった場合、私は疑問に思っWAN。

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