如何使用CSS为选定但未聚焦的表格行设置背景颜色？

Question

这是我的代码：

public class JavaFxTest7 extends Application {

    private static class Student {

        private int id;

        private int mark;

        public Student(int id, int mark) {
            this.id = id;
            this.mark = mark;
        }

        public int getId() {
            return id;
        }

        public int getMark() {
            return mark;
        }
    }

    private TableView<Student> table = new TableView<>(FXCollections.observableList(
            List.of(new Student(1, 3), new Student(2, 4), new Student(3, 5))));

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

    @Override
    public void start(Stage primaryStage) {
        var idColumn = new TableColumn<Student, Integer>();
        idColumn.setCellValueFactory((data) ->  new ReadOnlyObjectWrapper<>(data.getValue().getId()));
        var markColumn = new TableColumn<Student, Integer>();
        markColumn.setCellValueFactory((data) ->  new ReadOnlyObjectWrapper<>(data.getValue().getMark()));
        table.getColumns().addAll(idColumn, markColumn);

        VBox root = new VBox(new TextField(), table);
        var scene = new Scene(root, 400, 300);
        var css= this.getClass().getResource("test7.css").toExternalForm();

        scene.getStylesheets().addAll(css);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
}

我需要将黄色设置为选定但不聚焦的表格行的背景颜色。绿色作为聚焦表行的背景颜色。我试过了：

.table-row-cell:selected:focused {
    -fx-background-color: green;
    -fx-background-insets: 0;
}

.table-row-cell:selected {
    -fx-background-color: yellow;
    -fx-background-insets: 0;
}

但它给出了这个结果：

和这段代码：

.table-row-cell:focused {
    -fx-background-color: green;
    -fx-background-insets: 0;
}

.table-row-cell:selected {
    -fx-background-color: yellow;
    -fx-background-insets: 0;
}

给出了这个结果：

谁能告诉我该怎么做吗？

Answer 1

选定表格行和单元格的 CSS 规则相当复杂。在默认样式表中，它们定义如下：

/* Selected rows */
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected {
    -fx-background: -fx-selection-bar;
    -fx-table-cell-border-color: derive(-fx-selection-bar, 20%);
}

/* Selected when control is not focused */
.table-row-cell:filled:selected,
.table-row-cell:filled > .table-cell:selected {
    -fx-background: -fx-selection-bar-non-focused;
    -fx-table-cell-border-color: derive(-fx-selection-bar-non-focused, 20%);
}

/* focused cell (keyboard navigation) */
.table-view:focused:row-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell:focused,
.table-view:focused:cell-selection > .virtual-flow > .clipped-container > .sheet > .table-row-cell > .table-cell:focused {
    -fx-background-color: -fx-background, -fx-cell-focus-inner-border, -fx-background;
    -fx-background-insets: 0, 1, 2;
}

/***** ROW CELLS **************************************************************/
/* Each row in the table is a table-row-cell. Inside a table-row-cell is any
   number of table-cell. */
.table-row-cell {
    -fx-background: -fx-control-inner-background;
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
    -fx-background-insets: 0, 0 0 1 0;
    -fx-padding: 0;
    -fx-text-fill: -fx-text-background-color;
}
.table-row-cell:odd {
    -fx-background: -fx-control-inner-background-alt;
}

/***** INDIVIDUAL CELLS ********************************************************/
.table-cell {
    -fx-padding: 0.166667em; /* 2px, plus border adds 1px */
    -fx-background-color: null;
    -fx-border-color: transparent -fx-table-cell-border-color transparent transparent;
    -fx-cell-size: 2.0em; /* 24 */
    -fx-text-fill: -fx-text-background-color;
}
.table-view > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected {
    -fx-background-color: -fx-table-cell-border-color, -fx-background;
    -fx-background-insets: 0, 0 0 1 0;
}

简而言之，

rows

的 fx-background-color 设置为名为

-fx-background

的查找颜色（带有由嵌套背景实现的边框）。行中未选定的单个单元格的

-fx-background-color

会发送到

null

（透明），以便您看到该行的背景，而选定的单个单元格则设置为

-fx-background

。

当选择行并获得焦点时，查找颜色

-fx-background

将针对行和单个单元格设置为另一种查找颜色，称为 -fx-selection-bar，当选择行但未获得焦点时，

-fx-background再次将行和单元格的 

设置为

-fx-selection-bar-non-focused

。我无法完全解释您观察到的确切行为，但实现您想要的效果的最简单方法是设置用于选择的查找颜色：

.table-view {
    -fx-selection-bar: green;
    -fx-selection-bar-non-focused: yellow;
}