Creating two CSS pseudo classes (one representing :hover, the other :pressed) in a CSS file will have different behavior depending on which appears first. In the first example, behavior is as expected. When the mouse hovers over a button, fill turns to gray. When the button is pressed, fill turns to black.

===== CSSOK.fx =====
import javafx.scene.control.*;
import javafx.scene.*;
import javafx.stage.*;
import javafx.scene.layout.*;

Stage {
   scene: Scene {
      stylesheets: ["{__DIR__}CSSOK.css"]
      content: [
         Tile {
            columns: 1, vgap: 10
            content: [
               Button {
                  style: "fill: red;"
                         "text-fill: white;"
                         "text: \"Sample Button 1\";"
                         "font: 24pt serif"
               }
               Button {
                  style: "fill: red;"
                         "text-fill: white;"
                         "text: \"Sample Button 2\";"
                         "font: 24pt serif"
               }
            ]
         }
      ]
   }
}

===== CSSOK.css =====
Button:hover {
   fill: gray;
}

Button:pressed {
   fill: black;
}

In the second example, Everything's the same as the preceeding FX code, except the imported CSS file is "CSSBug.css". The CSS file has reversed the order of the CSS Pseudo classes, where :pressed appears before :hover. When a mouse hovers over a button, fill turns to gray, and returns to red when the mouse leaves the control. However, when the mouse is pressed over a button, the fill does not become black as one might expect.

===== CSSBug.fx =====
import javafx.scene.control.*;
import javafx.scene.*;
import javafx.stage.*;
import javafx.scene.layout.*;

Stage {
   title: "CSS precedence"
   scene: Scene {
      stylesheets: ["{__DIR__}CSSBug.css"]
      content: [
         Tile {
            columns: 1, vgap: 10
            content: [
               Button {
                  style: "fill: red;"
                         "text-fill: white;"
                         "text: \"Sample Button 1\";"
                         "font: 24pt serif"
               }
               Button {
                  style: "fill: red;"
                         "text-fill: white;"
                         "text: \"Sample Button 2\";"
                         "font: 24pt serif"
               }
            ]
         }
      ]
   }
}

===== CSSBug.css =====
Button:pressed {
   fill: black;
}

Button:hover {
   fill: gray;
}