JavaFX中如何仅为MenuBar下的顶级菜单应用CSS样式？

方法一：使用CSS直接子选择器 #

利用CSS的直接子元素选择器（>），可以精准定位直接隶属于MenuBar的顶级菜单，不会影响嵌套的子菜单。

示例CSS代码：

/* 仅作用于MenuBar的直接子菜单（顶级菜单） */
.menu-bar > .menu {
    -fx-background-color: #e0f7fa;
    -fx-text-fill: #00796b;
}

/* 子菜单不受上述样式影响，可单独设置（可选） */
.menu .menu {
    -fx-background-color: #ffffff;
    -fx-text-fill: #212121;
}

原理：menu-bar > .menu只会匹配父元素是MenuBar的Menu节点，而子菜单的父元素是其他Menu，因此不会被选中。

方法二：自定义样式类 #

给所有顶级菜单添加统一的自定义样式类，再通过该类选择器设置样式，避免依赖结构选择器。

1. 在FXML中给顶级菜单添加样式类：

<MenuBar>
    <Menu text="Edit" styleClass="top-menu">
        <MenuItem text="Copy"/>
        <MenuItem text="Paste"/>
    </Menu>
    <Menu text="View" styleClass="top-menu">
        <MenuItem text="ShowGrid"/>
        <MenuItem text="Show"/>
        <Menu text="Zoom">
            <MenuItem text="50%"/>
            <MenuItem text="100%"/>
        </Menu>
    </Menu>
</MenuBar>

2. 在CSS中针对自定义样式类设置样式：

.top-menu {
    -fx-background-color: #e0f7fa;
    -fx-text-fill: #00796b;
}

这种方式更灵活，即使后续菜单结构调整，只要保持样式类的设置，样式就不会失效。

内容的提问来源于stack exchange，提问作者Y.F.