Question

在我的fxml中我有css的url（这个fxml是通过SceneBuilder创建的）

<AnchorPane>
...
  <stylesheets>
    <URL value="@../styles/test.css" />
  </stylesheets>
</AnchorPane>

和test.css包含

.root{
  ...
}

如果我在SceneBuider中预览一切正常。但在运行时，这种风格并不适用。我将定义更改为

#AnchorPane{
  ... 
}

这种方式在预览和运行时都可以。 .root有什么问题？

Answer 1

为什么它不起作用

您没有将css应用于场景的根节点。您正在将它应用于AnchorPane（<stylesheets>元素是<AnchorPane>元素的子元素）。因此，如果为仅应用于AnchorPane的样式表设置.root css选择器，则.root css选择器永远不会应用，因为（作为您在注释中引用的文档），＆＃34; .root样式类应用于Scene实例的根节点＆＃34;。

为您的窗格设置根样式类

您可以通过在AnchorPane上设置.root类来使其工作，例如：<AnchorPane styleClass="root">。虽然您可能希望使用不同的样式类名称（例如<AnchorPane styleClass="custom-root">并保留.root样式类以保留给场景（因为重写.root可能会产生意想不到的后果）。

为场景设置样式表

您可以处理它的另一种方法是不在FXML中定义css样式表，而是使用以下代码将css样式表添加到场景中：

scene.getStylesheets().add("/com/example/javafx/app/mystyles.css")

由于使用.root表示您想要更改整个场景的样式，我建议您使用此方法。

如果这样做，您仍然可以通过在SceneBuilder中选择菜单项Preview | Scene Stylesheets | Add a Style Sheet...来预览带有样式的场景。

JavaFX和css的误解

1 个答案: