JavaFX-应用于Button的-fx-background-color不起作用

Question

I'm trying to apply this property to the buttons which located inside of the GridPane. GridPane has a class so I tried the #id.class selector . It's not worked. Also I checked another css property: -fx-alignment: bottom-right . It's worked! I tried the code:

#grid1 .button {
-fx-background-color: #ff2117;

}

and

#grid1 .button {
    -fx-background-color: #ff2117;
}

Nothing is changed. I use IntelliJ IDEA 14 and JavaFX version is 8.0.25 and default settings of IDE.

  <GridPane fx:id="grid1" alignment="CENTER" hgap="10.0" layoutY="150.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="250.0" prefWidth="600.0" style="-fx-background-color: #e6e6e6;" vgap="5.0">
    <columnConstraints>
      <ColumnConstraints hgrow="SOMETIMES" maxWidth="120.0" minWidth="0.0" prefWidth="120.0" />
      <ColumnConstraints hgrow="SOMETIMES" maxWidth="569.0" minWidth="10.0" prefWidth="454.0" />
        <ColumnConstraints hgrow="SOMETIMES" maxWidth="569.0" minWidth="10.0" prefWidth="454.0" />
        <ColumnConstraints hgrow="SOMETIMES" maxWidth="569.0" minWidth="10.0" prefWidth="454.0" />
        <ColumnConstraints hgrow="SOMETIMES" maxWidth="569.0" minWidth="10.0" prefWidth="454.0" />
        <ColumnConstraints hgrow="SOMETIMES" maxWidth="569.0" minWidth="10.0" prefWidth="454.0" />
    </columnConstraints>
    <rowConstraints>
        <RowConstraints minHeight="10.0" prefHeight="10.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="10.0" vgrow="SOMETIMES" />
      <RowConstraints minHeight="10.0" prefHeight="10.0" vgrow="SOMETIMES" />
      <RowConstraints minHeight="10.0" prefHeight="10.0" vgrow="SOMETIMES" />
      <RowConstraints minHeight="10.0" prefHeight="10.0" vgrow="SOMETIMES" />
    </rowConstraints>
     <children>
        <Button  fx:id="button1" alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="1" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="2" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="3" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="4" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="5" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="1" GridPane.rowIndex="1" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="2" GridPane.rowIndex="1" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="3" GridPane.rowIndex="1" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="4" GridPane.rowIndex="1" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="5" GridPane.rowIndex="1" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="1" GridPane.rowIndex="2" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="2" GridPane.rowIndex="2" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="3" GridPane.rowIndex="2" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="4" GridPane.rowIndex="2" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="5" GridPane.rowIndex="2" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="1" GridPane.rowIndex="3" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="2" GridPane.rowIndex="3" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="3" GridPane.rowIndex="3" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="4" GridPane.rowIndex="3" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="5" GridPane.rowIndex="3" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="1" GridPane.rowIndex="4" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="2" GridPane.rowIndex="2" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="2" GridPane.rowIndex="4" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="3" GridPane.rowIndex="4" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="4" GridPane.rowIndex="4" />
        <Button alignment="CENTER" contentDisplay="CENTER" mnemonicParsing="false" prefHeight="50.0" prefWidth="111.0" style="-fx-background-color: #87cefa; -fx-border-radius: 10;" GridPane.columnIndex="5" GridPane.rowIndex="4" />
     </children>
  </GridPane>

Answer 1

I think that the problem is that you set in FXML style="-fx-background-color: #87cefa;" so when you change the Stylesheet with the css file the style remain ...