如何修改TabPane标签超宽时弹出页及红圈标注区域的样式？

1. 修改标签超出宽度时弹出菜单的样式 #

当TabPane标签数量过多超出显示宽度时，点击下拉按钮弹出的是ContextMenu，可通过以下CSS规则修改样式：

整体菜单容器样式 #

/* 调整弹出菜单的背景、边框、圆角与内边距 */
.tab-pane-ui .tab-header-area .tab-menu-button .context-menu {
    -fx-background-color: #f5f5f5;
    -fx-border-color: #cccccc;
    -fx-border-radius: 4px;
    -fx-padding: 5px 0;
}

菜单选项样式 #

/* 基础选项样式 */
.tab-pane-ui .tab-header-area .tab-menu-button .context-menu .menu-item {
    -fx-padding: 8px 20px;
    -fx-background-color: transparent;
}

/* 鼠标悬停状态 */
.tab-pane-ui .tab-header-area .tab-menu-button .context-menu .menu-item:hover {
    -fx-background-color: #e0e0e0;
}

/* 选中状态 */
.tab-pane-ui .tab-header-area .tab-menu-button .context-menu .menu-item:selected {
    -fx-background-color: #2196f3;
    -fx-text-fill: white;
}

2. 修改红圈标注区域（control-buttons-tab）的样式 #

你提供的.tab-pane-ui .control-buttons-tab选择器是正确的，直接为其设置背景、边框等属性即可：

/* 修改区域背景、边框与内边距 */
.tab-pane-ui .control-buttons-tab {
    -fx-background-color: #f0f0f0;
    -fx-border-color: #dddddd;
    -fx-border-width: 0 0 0 1px; /* 左侧添加分隔线 */
    -fx-padding: 0 5px;
}

/* 调整选中状态的背景 */
.tab-pane-ui .control-buttons-tab:selected {
    -fx-background-color: #e8e8e8;
}

如果默认样式优先级过高导致修改无效，可临时用!important强制覆盖（调试后建议移除，避免样式冲突）：

.tab-pane-ui .control-buttons-tab {
    -fx-background-color: #f0f0f0 !important;
}

内容的提问来源于stack exchange，提问作者XiaoJiawei