JavaFX CSS 选择器介绍

JavaFX CSS 是用于定义 JavaFX 应用程序中用户界面元素样式的语言。它基于 W3C CSS 2.1 版本，但进行了一定的扩展以适应 JavaFX 的特定需求。JavaFX CSS 提供了多种选择器，包括类型选择器、类选择器、ID选择器和伪类选择器，以及一系列属性，用于控制用户界面元素的外观。

类型选择器

类型选择器用于控制特定类型的控件的样式。例如，.button 选择器将应用于所有 Button 控件。

类选择器

类选择器允许为具有相同类名称的控件集合应用样式。例如，.font-large 类选择器可以应用于任何设置了 font-large 类的控件。

ID选择器

ID选择器用于唯一标识控件，并为其应用特定的样式。例如，#lbl-title 选择器将应用于具有 lbl-title ID 的 Label 控件。

伪类选择器

伪类选择器用于定义控件的特定状态下的样式，如 :hover 表示鼠标悬停状态。

JavaFX中的伪类选择器是一种特殊的CSS选择器，用于定义控件在特定状态下的样式。以下是一些常见的JavaFX伪类选择器及其用途：

• :hover：当鼠标悬停在控件上时应用样式。
• :focused：当控件获得焦点时应用样式。
• :disabled：当控件被禁用时应用样式。
• :pressed：当控件被按下时应用样式。
• :selected：当控件被选择时应用样式（例如，选择框或单选按钮）。
• :odd：用于奇数行，例如在表格中。
• :even：用于偶数行，例如在表格中。
• :first-child：用于选择组件的第一个子元素。
• :last-child：用于选择组件的最后一个子元素。
• :middle：用于选择组件的中间子元素。

这些伪类选择器可以与其他CSS选择器和属性组合使用，以定义自定义样式和布局。

CSS 属性

JavaFX CSS 属性以 -fx- 开头，后跟属性名称的小写形式。例如，-fx-background-color 用于设置控件的背景颜色。

使用示例

示例1：使用CSS文件设置样式

首先，创建一个CSS文件，例如 main.css，并在其中定义样式规则。例如：

/* 设置背景色和字体大小 */
.bg {
    -fx-background-color: #1EC6FC;
    -fx-font-size: 20px;
    -fx-text-fill: red;
}

/* 设置按钮样式 */
.button {
    -fx-font-size: 40px;
}

然后，在JavaFX应用程序中加载这个CSS文件：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class TitleDemo extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        stage.setTitle("标题");
        stage.getIcons().add(new Image("img/avatar.jpg"));
        stage.setHeight(200);
        stage.setWidth(300);
        
        Label label = new Label("CSS 样式");
        label.getStyleClass().add("bg");
        
        Button button = new Button("样式按钮");
        button.setStyle("-fx-background-color: red;-fx-text-fill: blue;");
        
        VBox box = new VBox();
        box.getChildren().add(label);
        box.getChildren().add(button);
        
        Scene scene = new Scene(box);
        scene.getStylesheets().add("css/main.css");
        
        stage.setScene(scene);
        stage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

在这个示例中，Label 和 Button 控件分别应用了CSS文件中定义的 .bg 和 .button 样式类1。

示例2：使用CSS文件设置特定元素的样式

您可以在CSS文件中为特定的元素ID设置样式。例如：

#root {
    -fx-background-radius: 10;
}

然后在JavaFX应用程序中，为相应的元素设置ID，并加载CSS文件：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

public class RootExample extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        AnchorPane root = new AnchorPane();
        root.setId("root");
        
        Scene scene = new Scene(root, 300, 200);
        scene.getStylesheets().add(getClass().getResource("styles.css").toString());
        
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

在这个示例中，AnchorPane 元素的背景半径被设置为10像素2。

示例3：使用CSS文件设置全局样式

您可以在CSS文件中定义全局样式，这些样式将应用于所有匹配的元素。例如：

.root {
    -fx-background-color: #383838;
    -fx-font-size: 24;
}

.label {
    -fx-text-fill: #F0FFFF;
}

然后在JavaFX应用程序中，加载CSS文件：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class GlobalStyleExample extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        VBox vBox = new VBox();
        vBox.setPadding(new Insets(10));
        vBox.setSpacing(10);
        
        Label label = new Label("Label");
        Label labelBlue = new Label("Label Blue");
        Label labelBold = new Label("Label Bold");
        Label labelRed = new Label("Label Red");
        
        vBox.getChildren().addAll(label, labelBlue, labelBold, labelRed);
        
        Scene scene = new Scene(vBox, 300, 200);
        scene.getStylesheets().add(getClass().getResource("globalstyle.css").toString());
        
        stage.setScene(scene);
        stage.setTitle(this.getClass().getSimpleName());
        stage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

在这个示例中，.root 类定义了场景的背景颜色和字体大小，.label 类定义了标签的文本颜色3。

注意：

javaFX中类型选择器相当于web css中的标签选择器。而且javaFX的类型选择器与类选择器的书写格式是一样的，因此要注意使用中的命名。