css - JavaFX和css的误解

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 选择器永远不会应用，因为(如您在评论中引用的文档所述)，“.root 样式类应用于Scene 实例的根节点”。

为您的 Pane 设置根样式类

您可以通过在 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... 来预览带有样式的场景。 .