TL;DR

這篇介紹如何透過 style id 與 style class，讓 CSS 能夠針對個別 JavaFX 元素設定風格，而不是只能套用在整個 Scene 或同一類型的所有元素上。

使用 Style ID 設定個別元素

要更細節地設定畫面風格，可以指定元素的 Style ID：

(#"setId" label-java-version "javaversion")

透過元素節點（Node）的 setId() 方法，可以設定元素的 Style ID。上面範例將 Java 版本標籤（Label）的 ID 設為 javaversion，如此一來便能在 CSS 中單獨設定這個元素的風格，例如變更文字顏色：

#javaversion {
    -fx-text-fill: red;
}

使用 Style Class 設定元素群組風格

類似地，可以用 Node.getStyleClass().add() 添加新的元素風格類別：

(chain (#"getStyleClass" box) ("add" "info-box"))

這麼一來，原本沒有 CSS 選擇器可以調整的 VBox，現在可以透過以下 CSS 覆寫 (#"setAlignment" box (jfield "javafx.geometry.Pos" "CENTER")) 的設定：

.info-box {
    /** center -> bottom-right 向下向右靠齊 **/
    -fx-alignment: bottom-right;
}

也可以移除 LISP 中的對齊設定，完全改由 CSS 控制：

.info-box {
    -fx-alignment: center;
}

執行結果

透過 Style ID 與 Style Class，可以讓 JavaFX 的 CSS 選擇器針對特定元素或元素群組套用個人化風格：

這篇完成了個別元素的風格設定。下一篇將進入第一個互動元件：Button，從點擊事件開始處理 JavaFX 的動作回應。