JavaFX 8如何查看GUI组件的生效CSS属性？

我完全懂你的痛点——JavaFX确实不像浏览器那样有开箱即用的样式检查工具，尤其是getStyle()只返回内联样式，根本看不到完整的生效属性集合。下面是我整理的几个实用方案，帮你理清样式优先级、查看完整属性，还有解决TableView的样式问题：

如果你用FXML构建界面，Scene Builder自带的CSS Analyzer能帮你快速查看静态样式：

• 打开Scene Builder，加载你的FXML文件（或者直接拖拽组件搭建测试界面）
• 选中要检查的元素（比如TableCell或TableRowCell）
• 切换到右侧栏的CSS Analyzer面板（图标是小放大镜）
• 这里能直观看到：
  • 所有生效的-fx-*属性，包括来自Modena、自定义CSS、内联设置的
  • 每个属性的具体来源（比如哪个CSS文件的哪个选择器，或是代码内联设置）
  • 继承自父节点的属性会明确标注，还能看到样式优先级（内联>自定义>Modena）
• 小提示：如果你的样式是代码动态设置的，Scene Builder无法实时同步，建议把动态样式抽成CSS类，或者用下面的运行时工具。

这是JDK自带的工具，能查看运行时的所有生效样式，完美解决动态样式的调试问题：

• 启动你的JavaFX应用时，添加VM参数：-Djavafx.scene.debug=true
• 运行应用后，按快捷键打开Inspector：Windows/Linux用Ctrl+Shift+D，Mac用Cmd+Shift+D
• 功能和浏览器DevTools几乎一致：
  • 点击界面上的任意元素直接选中，查看所有生效的CSS属性
  • 清晰标注每个属性的来源：继承自父节点、来自某个CSS文件的选择器、或是代码内联设置
  • 支持实时修改属性值，即时看到界面变化，调试效率拉满！

当样式分散在CSS文件和Java代码中时，先牢记JavaFX的样式优先级（从高到低）：

1. 代码内联样式：node.setStyle("-fx-font-size:16px;")
2. 自定义CSS文件中的选择器（越具体优先级越高，比如.table-view .table-cell比.table-cell优先级高）
3. 内置Modena CSS的默认样式
4. 继承自父节点的可继承属性（如字体、文本颜色）

要理清混乱的样式，建议：

• 尽量把静态样式抽到CSS文件中，只在代码中设置动态变化的样式（比如根据状态切换的样式）
• 给组件添加自定义样式类：node.getStyleClass().add("custom-cell")，然后在CSS中用.custom-cell定位，比默认选择器更清晰
• 用Scene Inspector定位每个属性的来源，直接找到是哪个CSS规则或代码行设置的

控制单元格字体 #

直接用CSS选择器定位单元格即可，灵活度很高：

/* 所有TableView的单元格 */
.table-cell {
    -fx-font-family: "Arial";
    -fx-font-size: 14px;
    -fx-text-fill: #333;
}

/* 仅针对加了custom-table类的TableView的单元格 */
.custom-table .table-cell {
    -fx-font-size: 16px;
}

如果需要动态给特定单元格设置样式，推荐用样式类而非内联：

TableCell<MyData, String> cell = new TableCell<>() {
    @Override
    protected void updateItem(String item, boolean empty) {
        super.updateItem(item, empty);
        setText(empty ? null : item);
    }
};
cell.getStyleClass().add("large-font-cell");

然后在CSS中定义：

.large-font-cell {
    -fx-font-size: 18px;
    -fx-font-weight: bold;
}

为独立列设置样式 #

有两种常用方法：

方法1：给列的单元格工厂添加样式类 #

TableColumn<MyData, String> nameCol = new TableColumn<>("Name");
nameCol.setCellFactory(col -> {
    TableCell<MyData, String> cell = new TableCell<>() {
        @Override
        protected void updateItem(String item, boolean empty) {
            super.updateItem(item, empty);
            setText(empty ? null : item);
        }
    };
    // 给该列的所有单元格加样式类
    cell.getStyleClass().add("name-column-cell");
    return cell;
});

CSS中对应：

.name-column-cell {
    -fx-background-color: #f5f5f5;
    -fx-text-fill: #2c3e50;
}

方法2：通过列的ID定位 #

nameCol.setId("name-column");

CSS中可以通过列的ID定位其下的单元格：

#name-column .table-cell {
    -fx-font-weight: bold;
    -fx-border-right-color: #ddd;
}

如果想知道某个属性的默认值（比如没手动设置-fx-font-size时的取值），有两个办法：

• 用Scene Inspector查看，未手动设置的属性会显示Modena中的默认值
• 直接查看Modena CSS源码：在JDK安装目录下找到jfxrt.jar，解压后查看com/sun/javafx/scene/control/skin/modena/modena.css，里面定义了所有控件的默认样式

最后说一句：不要轻易放弃CSS！虽然初期调试确实麻烦，但一旦理顺了样式结构，比全用Java代码设置样式灵活太多——批量修改、主题切换、响应式适配这些场景，CSS的优势是Java代码无法替代的。

内容的提问来源于stack exchange，提问作者Angelos Asonitis