为何通过键盘与鼠标聚焦HTML元素的表现存在差异？

安全阿岳

2026-6-30

聚焦状态样式差异原因解析

问题背景

尝试为处于聚焦状态的v-expansion-panel-header元素设置样式（包含鼠标点击按住、Tab键选中两种场景），但发现两种操作下元素表现不一致。

CSS代码

.v-expansion-panel-header:focus {
    outline: 2px solid;
    outline-color: blue;
    background-color: white;
}

HTML代码

<div class="accordion">
    <v-expansion-panels variant="accordion" flat>
        <v-expansion-panel>
            <div class="header">
                <v-expansion-panel-header flat>
                    Accordion
                </v-expansion-panel-header>
            </div>
            <div class="content">
                <v-expansion-panel-content>
                    <slot></slot>
                </v-expansion-panel-content>
            </div>
        </v-expansion-panel>
    </v-expansion-panels>
</div>

（注：附元素原图、Tab键聚焦效果截图及鼠标点击按住时的效果截图）

差异原因分析

焦点触发逻辑不同
Tab键导航时，浏览器会按照原生规则给可聚焦元素分配焦点，此时:focus伪类会稳定触发，你的样式能正常应用。而鼠标点击按住时，Vuetify的v-expansion-panel-header组件内部会处理展开/折叠的交互逻辑，可能在mousedown事件中将焦点转移到组件内部的隐藏元素（比如内置的触发按钮），导致外层的.v-expansion-panel-header并未真正获得焦点，自然不会触发:focus样式。
组件重写了原生交互行为
Vuetify这类UI组件库会自定义鼠标交互的默认行为，为了优化体验，会在鼠标点击时阻止原生焦点直接落在header容器上，转而将焦点绑定到组件内部的可交互节点上，这就造成点击按住时外层header的:focus状态不生效。
伪类触发条件的本质区别
:focus针对的是元素获得焦点的状态，而鼠标点击按住更多对应元素的:active（激活）状态。如果要覆盖点击按住时的样式，需要同时设置:active或:focus:active组合伪类，但还要注意组件内部样式的优先级可能会覆盖你的自定义样式。