JavaFX-應用於Button的-fx-background-color不起作用

Question

我正在嘗試將此屬性應用於GridPane內部的按鈕。 GridPane有一個類，所以我嘗試了#id.class selector 。 沒用 我也檢查了另一個css屬性： -fx-alignment: bottom-right 。 工作了！ 我嘗試了代碼：

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

}

和

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

一切都沒有改變。 我使用IntelliJ IDEA 14 ， JavaFX版本是8.0.25，並且是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

我認為問題在於您設置為FXML style =“-fx-background-color：＃87cefa;” 因此，當您使用css文件更改樣式表時，樣式仍然保持...