JavaFX中Tab的focus-within伪类不生效及样式异常问题

核心误解澄清 #

:focus-within伪类仅作用于自身节点层级包含获焦子元素的容器，但Tab控件的结构特殊：Tab的内容（如你的TableView）并不属于Tab自身的节点树，而是被TabPane托管在独立的内容区域中。因此Tab:focus-within永远不会触发——Tab的节点层级里根本没有可获焦的子元素。

针对你修改后问题的修复 #

你修改后的CSS选择器.tab-pane:focus-within > .tab-header-area .tab:selected .focus-indicator逻辑本身是正确的：只有当TabPane内部有元素获焦时，它的选中Tab才会显示红色指示器。若出现两个TabPane的选中Tab同时变红的情况，大概率是测试时焦点意外落在了两个TabPane的可获焦元素上，或是JavaFX 23-ea版本的临时bug。

为了更精准地控制样式，推荐使用自定义伪类的方案，直接关联Tab内容的焦点状态：

步骤1：给自定义Tab添加焦点监听与伪类 #

修改MyTab类，添加自定义伪类并监听TableView的焦点变化：

private static class MyTab extends Tab {
    // 定义自定义伪类
    private static final PseudoClass CONTENT_FOCUSED = PseudoClass.getPseudoClass("content-focused");
    private final TableView<Student> table = new TableView<>(FXCollections.observableList(
        List.of(new Student(1, 3), new Student(2, 4), new Student(3, 5))));

    public MyTab() {
        // 原有初始化代码...
        
        // 监听TableView焦点状态，切换自定义伪类
        table.focusedProperty().addListener((obs, oldFocused, newFocused) -> {
            pseudoClassStateChanged(CONTENT_FOCUSED, newFocused);
        });
        this.setContent(table);
    }
}

步骤2：修改CSS使用自定义伪类 #

替换原CSS内容：

.tab-pane > .tab-header-area .tab .focus-indicator {
    -fx-border-width: 2 0 0 0;
    -fx-border-color: green;
    -fx-border-insets: -3 -5 0 -5;
    -fx-border-radius: 2 2 0 0;
}

/* 仅内容获焦的选中Tab显示红色指示器 */
.tab-pane > .tab-header-area .tab:selected:content-focused .focus-indicator {
    -fx-border-color: red;
}

方案优势 #

• 直接绑定Tab内容的焦点状态，避免TabPane范围:focus-within可能带来的误判
• 逻辑清晰，不受TabPane内部结构变动影响
• 兼容JavaFX 22及以上版本，不存在伪类支持问题

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