如何在css中引用锚点窗格？

Question

是否可以在css中引用锚窗格？

如果锚窗格恰好是根，那就好了：

.root{
-fx-background-image: url("xxx.yy");
}

有效。但如果没有，那怎么办呢？我试过.anchor-pane {}，它没用。然后我读到，那个锚窗格包含了Pane所拥有的一切。所以我也尝试了.pane {}它也没有用。

如何将背景设置为无根锚定窗格？ 谢谢！

Answer 1

您始终可以指定css class并将其明确添加到AnchorPane

anchorPane.getStyleClass().add("pane");

在你的css中：

.pane{
    -fx-background-image: url("xxx.yy");
}

---

您可以通过添加css id

来执行相同操作

anchorPane.setId("pane");

在你的css：

#pane{
    -fx-background-image: url("xxx.yy");
}

Answer 2

这个答案与我刚刚同时写的鼬一样。

---

您在CSS样式表中使用CSS selectors来选择节点。

窗格是一个节点。节点可以在其上设置css id node.setId("xyzzy-id")，或者可以在其上设置样式类node.getStyleClass().add("xyzzy-class")。

对于提供的示例，您可以通过以下任一方式选择窗格：

按ID选择：

#xyzzy-id {
    -fx-background-color: palegreen;
}

按班级选择：

.xyzzy-class {
    -fx-background-color: papayawhip;
}

您还可以在节点上为id和样式类设置FXML属性（而不是在代码中执行此操作，如上所述）。 SceneBuilder有这样的字段，所以如果你使用SceneBuilder编写FXML，只需填写相应的字段，它就会将所需的属性添加到你的FXML文件中。