无法设置水平盒子或垂直盒子的样式

Question

<p>非常令人沮丧，因为我遵循指南和基本教程。我可以将 CSS 样式应用于不同的元素，但不能应用于 vbox 或 hbox。</p> <p>我有以下简单的应用程序，使用 FMXL 和 CSS 创建一个简单的场景：</p> <pre class="brush:php;toolbar:false;">import java.net.URL; import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.stage.Stage; import javafx.scene.Parent; import javafx.scene.Scene; public class BingRen extends Application { @Override public void start(Stage primaryStage) { Parent root = null; FXMLLoader loader = new FXMLLoader(); URL xmlUrl = getClass().getResource("/BingRen.fxml"); loader.setLocation(xmlUrl); try { root = loader.load(); Scene scene = new Scene(root,400,400); scene.getStylesheets().add(getClass().getResource("BingRen.css").toExternalForm()); primaryStage.setScene(scene); primaryStage.show(); } catch(Exception e) { e.printStackTrace(); } } public static void main(String[] args) { launch(args); } }</pre> <p>使用 FXML，仅创建一个 BordPane 和 2 个 HBox，各包含一个标签。几乎和HellopApp一样简单：</p>

<BorderPane fx:id="rootBorderPane"
        xmlns=“http://javafx.com/javafx”
        xmlns:fx="http://javafx.com/fxml"
        fx:controller="MainControler">
    <顶部>
        <H盒>
            >
        </HBox>
    </顶部>
    <底部>
        <H盒>
            <标签文本=“状态栏” >>
        </HBox>
    </底部>
    <中心>
    
</BorderPane></pre>
<p>还有CSS来设置一些基本属性：</p>
.hbox {
    -fx-背景颜色：#00ff00；
    -fx-边框颜色：#00ff00；
    -fx-边框宽度：2px；
    -fx-填充：10；
    -FX 间距：8；
}

。标签 {
    -fx-文本填充：#0000ff；
}</pre>
<p>标签正确变为蓝色，但未应用 hbox 样式</p>
<小时/>>
<p>事实上，这些建议都无效。</p>
<p>我尝试过：</p>

将 css 文件中的 .hbox 更改为 .Hbox
在css文件中创建#allbox并添加fx-id="allbox"和fxml文件
</ul>
<p>对于每次更改，我都会更改标签的颜色，以确保新版本的 CSS 能够被读取。</p>
<p>标签总是改变颜色，但我从来没有在盒子中获得背景或填充</p>

Answer 1

为什么您当前的方法失败了

查看CSS 文档.

对于HBox

对于标签

因此，HBox 不存在“.hbox”这样的样式类，除非您添加了一个样式类，但您还没有这样做。

CSS 选择器和 JavaFX 背景

阅读标题为 " 的部分CSS 和 JavaFX 场景图”：

应用示例

因此，您可以通过三种方法解决此问题：

1. 在 CSS 文件中使用类型选择器：

   HBox { <css rules> }

2. 在 CSS 文件中应用样式类：

   .my-hbox-styleclass { <css rules> }

   并在 FXML 中写入：

   <HBox styleClass="my-hbox-styleclass">

   或者在代码中写入：

   myHBox.getStyleClass().add("my-hbox-styleclass");

3. 在 CSS 文件中应用样式 ID：

   #my-hbox-id { <css rules> }

   并在 FXML 中写入：

   <HBox id="my-hbox-id">

   或者在代码中写入：

   myHBox.setId("my-hbox-id");

选择器范围差异

每种方法的标准应用的含义有所不同：

1. 类型选择器将应用于用户界面中的所有 HBox 类型。
2. 类选择器将应用于应用了给定样式类的任何内容。
3. id 选择器通常用于 UI 中的单个节点，而不是节点的类型或类。它在 FXML 文档或场景图树中应该是唯一的，尽管这不是强制的。