Javafx程序开发-选择器_javafx文件选择器

一、选择器分类

在 JavaFX 中，样式类名可以分为以下几种：

1.样式类选择器（Class Selector）

样式类选择器（Class Selector）：以一个点号（.）开头的样式类名，用来选择具有该样式类的所有控件。

.my-button {
    /* 样式规则 */
}

2.ID 选择器（ID Selector）

ID 选择器（ID Selector）：以一个井号（#）开头的样式类名，用来选择具有该 ID 的控件。

#my-label {
    /* 样式规则 */
}

3.类型选择器（Type Selector）

类型选择器（Type Selector）：以控件名称开头的样式类名，用来选择所有该类型的控件。

Button {
    /* 样式规则 */
}

4.后代选择器（Descendant Selector）

后代选择器（Descendant Selector）：用空格分隔的两个样式选择器，用来选择后代控件。

.container .my-button {
    /* 样式规则 */
}

5.子选择器（Child Selector）

子选择器（Child Selector）：用大于号（>）分隔的两个样式选择器，用来选择子控件。

.container > .my-button {
    /* 样式规则 */
}

6.伪类（Pseudo-class）选择器

伪类（Pseudo-class）选择器：以冒号（:）开头的样式类名，用来选择控件的特殊状态。

.my-button:hover {
    /* 鼠标悬停时的样式规则 */
}

其中，样式类选择器、ID 选择器和类型选择器是最基本的样式选择器，后代选择器和子选择器增强了样式选择器的层级选择能力，伪类选择器则可以通过控件的特殊状态来设置样式。

样式类选择器（Class Selector）是在 JavaFX 中最常用的选择器。因为 JavaFX 推荐使用 MVC 模式，将标记和样式分离，使得代码更清晰，易于维护。而样式类选择器则可以方便地为多个控件应用相同的样式，进一步提高代码复用性和可维护性。

二、选择器的优先级

在 JavaFX 的 CSS 中，选择器的优先级和 CSS 的优先级规则基本保持一致。下面是 JavaFX 中选择器的优先级，从高到低：

• Inline 样式（ -fx-background-color: red; ）
• ID 选择器（ #my-id ）
• 样式类选择器（ .my-class ）
• 类型选择器（ Button ）
• 子选择器（ HBox > Button ）
• 伪类选择器（ :hover ）

在同一个样式表中，如果多个选择器应用于同一个节点，则优先级高的选择器的样式将会被应用。如果优先级相同，则后面出现的样式将会覆盖前面的样式。

示例代码：

<Button id="my-button" styleClass="my-class">Hello, world!</Button>

#my-button {
   -fx-background-color: red;
}
 
.my-class {
   -fx-background-color: blue;
}

上述代码中，-fx-background-color 的颜色将会是红色的，因为 ID 选择器的优先级高于样式类选择器。但是如果两个选择器都是样式类选择器，那么最后一个出现的样式类选择器将会应用于元素。例如：

<Button id="my-button" styleClass="my-class">Hello, world!</Button>

.my-class {
   -fx-background-color: red;
}
 
.my-class {
   -fx-background-color: blue;
}

上述代码中，-fx-background-color 的颜色将会是蓝色的，因为最后出现的样式类选择器将会应用。

当为一个 JavaFX 控件设置样式时，如果使用 styleClass 指定一个不存在的样式类，则不会应用任何样式。

如果你使用了一个不存在的 styleClass，JavaFX 并不会尝试使用 ID 选择器来应用样式。在 CSS 中，ID 选择器比样式类选择器的优先级更高，所以只有在控件的 id 属性匹配 CSS 文件中的 ID 选择器时，才会应用 ID 选择器指定的样式。

如果要使用 ID 选择器来设置 JavaFX 控件的样式，你可以在 FXML 文件中直接为控件指定一个 ID，然后在 CSS 文件中使用对应的 ID 选择器来设置样式。