如何防止 JavaFX FXML 菜单项的文本填充从菜单继承

Question

我正在使用 JavaFx，使用 css.

让菜单栏看起来完全符合我的要求似乎有问题

主菜单栏好像没问题。当我悬停或 select 时，背景变暗并且字体变为蓝色（示例中的“编辑”）。与下面的菜单项（示例中的“删除”）相同，但似乎其他非悬停、非selected 菜单项也得到蓝色文本而不是保持白色。

我已经尝试查看 https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html 和其他 Whosebug 文章，并且只是反复试验，但似乎无济于事。有什么建议吗？

源代码位于 https://github.com/pnogas/TornadoTest，但我会在下面提供一些片段，以防我从 github 中删除它以供将来阅读本文的人使用。

从场景生成器生成 FXML，然后从 intelliJ 自动格式化 IDE

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<VBox prefHeight="400.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1"
  fx:controller="com.paulnogas.log.analyzer.MainView">
<MenuBar stylesheets="@test.css" VBox.vgrow="NEVER">
    <Menu mnemonicParsing="false" text="Edit">
        <MenuItem mnemonicParsing="false" text="Undo"/>
        <MenuItem mnemonicParsing="false" text="Redo"/>
        <SeparatorMenuItem mnemonicParsing="false"/>
        <MenuItem mnemonicParsing="false" text="Cut"/>
        <MenuItem mnemonicParsing="false" text="Copy"/>
        <MenuItem mnemonicParsing="false" text="Paste"/>
        <MenuItem mnemonicParsing="false" text="Delete"/>
        <SeparatorMenuItem mnemonicParsing="false"/>
        <MenuItem mnemonicParsing="false" text="Select All"/>
        <MenuItem mnemonicParsing="false" text="Unselect All"/>
    </Menu>

这是test.css

的相关部分

.menu-bar,
.menu,
.menu-item {
    -fx-background-color: #222222;
}

.menu-bar .label,
.menu .label,
.menu-item .label {
    -fx-text-fill: white;
}

.menu:hover,
.menu:showing,
.menu-item:hover {
    -fx-background-color: #111111;
}

.menu:hover .label,
.menu:showing .label,
.menu-item:hover .label {
    -fx-text-fill: #80CBC4;
}

（我知道 TornadoFX 更喜欢 Kotlin 中的类型安全 CSS 而不是普通的 *.css 文件，但我想我现在想在 *.css 中这样做。我想偶尔使用 Scene Builder。我也喜欢 strict 强制分离关注点。当仅在 Kotlin 中工作时，我往往会失去纪律并最终得到意大利面条代码混合结构，样式，一个丑陋的 Kotlin 中的功能 class。也许我稍后会把它移到纯 Kotlin 中）。

Answer 1

select或（作为例子）

.menu:showing .label

将 select 显示菜单的后代所有标签。所以这包括标签，它们是菜单项的子节点，菜单项是显示菜单的子节点，等等。在这里你想要 only select 标签，它们是的直接子节点显示菜单。正确的 select 或语法是

.menu:showing > .label

你需要的CSS是

.menu-bar,
.menu,
.menu-item {
    -fx-background-color: #222222;
}

.menu-bar > .label,
.menu > .label,
.menu-item > .label {
    -fx-text-fill: white;
}

.menu:hover,
.menu:showing,
.menu-item:hover {
    -fx-background-color: #111111;
}

.menu:hover > .label,
.menu:showing > .label,
.menu-item:hover > .label {
    -fx-text-fill: #80CBC4;
}

另一种解决方案是在显示带有和不带有 :hover 伪类的菜单时显式设置菜单项中标签的文本颜色：

.menu-bar,
.menu,
.menu-item {
    -fx-background-color: #222222;
}


/* Note added .menu:showing .menu-item .label selector */

.menu-bar .label,
.menu .label,
.menu-item .label,
.menu:showing .menu-item .label {
    -fx-text-fill: white;
}

.menu:hover,
.menu:showing,
.menu-item:hover {
    -fx-background-color: #111111;
}

.menu:hover .label,
.menu:showing .label,
.menu:showing .menu-item:hover .label {
    -fx-text-fill: #80CBC4;
}

如何防止 JavaFX FXML 菜单项的文本填充从菜单继承

How to prevent JavaFX FXML menu-item's text-fill from inheriting from menu

css

javafx

fxml

tornadofx