css - Javafx 风格 - 继承不直观地工作，-fx-text-fill 不工作

Question

我是 JavaFX 的新手，对样式感到困惑。我正在使用 OpenJFX 13.0.1。我有以下简单场景:

val oscs = HBox()
val osc1 = VBox()
val title = Text("Osc 1")
title.styleClass.add("text")
osc1.children.add(title)
oscs.children.add(osc1)

val root = BorderPane()
root.children.add(oscs)
val scene = Scene(root, 500.0,  400.0)

我有两个问题:

1. -fx-text-fill 无法为文本着色，而 -fx-fill 可以。 IE。

   .text {
       -fx-fill: #44FFFF;
   }
   

   有效，而:

   .text {
       -fx-text-fill: #44FFFF;
   }
   

   没有。根据文档，这似乎是错误的。

2. 继承没有像我期望的那样工作。子节点不应该继承根吗？
   
   无论是 -fx-fill 还是 -fx-text-fill，以下内容都无法为标签着色。

   .root {
       -fx-font-size: 24px;
       -fx-font-family: sans-serif;
       -fx-fill: #44FFFF;  
       -fx-background-color: #000000;
       -fx-border-color: #44FF00;
       -fx-border-width: 2px;
   }
   

我做错了什么？

Answer 1

您可能混淆了 Label 和 Text。

Text 是 Shape 的子类，不提供 -fx-text-fill 属性。此外，Shape 的 -fx-fill 属性不会被继承。参见 CSS Reference Guide .

除了使用 Label 之外，您还可以使用后代选择器来分配填充:

.root .text {
    -fx-fill: #44FFFF;  
}

编辑:

Label 的 -fx-text-fill 也没有被继承。您应该能够通过将 inherit 指定为 -fx-text-fill 或 -fx-fill 属性的值来解决这两种情况。以下内容适用于 Text:

.root {
    -fx-fill: #44FFFF;
    -fx-background-color: #000000;
}

.text {
    -fx-fill: inherit;
}