css - 如何在 javaFX CSS 中选择 .list-cell

Question

有人能告诉我，我如何设计 1 ListView 的列表单元格吗？

我有两个 ListView。 id="#one"和 id="#two"的一个。

现在我想为每个 ListView 的列表单元格设置不同的样式。

.list-cell {
    -fx-text-fill: rgba(16, 27, 49, 0.8);
    -fx-background-color: transparent;
}

这是涵盖所有列表单元格的“.list-cell”。但我不想这样。

这是我尝试过的:

#one.list-view.list-cell
#one.list-view > list-cell
#one > list-view > list-cell
#one > list-view.list-cell
#one .list-view .list-cell
#one.list-cell
#one > list-cell
#one .list-cell
#one > .list-cell

没有任何作用。

现在这是在浪费时间。 CSS 是否在 JavaFX 中工作？我不想使用代码来设置元素样式。

Answer 1

JavaFX 的外部 CSS 文件中的选择器遵循与 HTML 中的 CSS 相同的结构规则。

基本上:

#name

选择任何具有 id name

的节点

.name

选择具有 CSS 类 name 的任何节点

两个没有空格连接的选择器选择匹配两个选择器的任何单个节点，所以

#one.list-cell

只有当它的 ID 为 one 并且具有 CSS 类 list-cell 等时才会选择一个节点

selector1 > selector2

选择匹配 selector2 的节点，该节点是匹配 selector1 的节点的直接子节点，所以

#one > .list-cell

选择具有 CSS 类 list-cell 的任何节点，该节点是 ID 为 one 的节点的直接子节点。

最后，

selector1 selector2

选择任何匹配 selector2 的节点，它是匹配 selector1 的节点的后代，所以

#one .list-cell

选择具有 CSS 类 list-cell 的任何节点，该节点是 ID 为 one 的节点的后代(直接或非直接)。

引用JavaFX CSS documentation for ListView ，您可以看到 ListView 具有 ListCell 作为非直接后代。准确地说，它有一个 CSS 类 virtual-flow 的 child ，而后者又有一个 CSS 类 clipped-container 的 child ，后者有 ListCell 子级，它们具有以下所有 CSS 类:cell、indexed-cell 和 list-cell。

因此，如果您的 ListView 有一个 id one，那么您可以使用

选择单元格

#one .list-cell

或

#one > .virtual-flow > .clipped-container > .list-cell

(后者可能会表现得更好，因为 CSS 引擎不必在场景图层次结构中任意搜索；但是第一个版本将足以满足几乎所有用例)。

这是一个 SSCCE:

import java.util.stream.IntStream;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ListView;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;

public class MultipleListViewStyleTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        ListView<String> firstList = new ListView<>();
        ListView<String> secondList = new ListView<>();

        firstList.setId("one");
        secondList.setId("two");

        IntStream.rangeClosed(1, 20).mapToObj(i -> "Item "+i).forEach(s -> {
            firstList.getItems().add(s);
            secondList.getItems().add(s);
        });

        HBox root = new HBox(10, firstList, secondList);
        root.setPadding(new Insets(20));
        root.setAlignment(Pos.CENTER);

        Scene scene = new Scene(root, 600, 600);
        scene.getStylesheets().add("multiple-list-view-style-test.css");

        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

多 ListView 样式测试.css:

#one .list-cell {
    -fx-text-fill: rgba(16, 24, 49, 0.8);
    -fx-background-color: transparent;
}

#two .list-cell {
    -fx-text-fill: blue ;
}