Mathlive中如何仅在元素获焦时显示键盘与菜单切换按钮？

你的需求完全可行，问题出在CSS选择器的写法上：

你写的math-field:focus math-field::part(virtual-keyboard-toggle)是在寻找获焦的math-field内部的子元素math-field的虚拟键盘切换按钮，这显然不符合DOM结构。正确的写法应该是直接给处于:focus状态的math-field本身的part设置样式。

完整实现代码 #

/* 默认隐藏键盘和菜单切换按钮 */
math-field::part(virtual-keyboard-toggle),
math-field::part(menu-toggle) {
    display: none;
}

/* 当math-field获焦时显示两个按钮 */
math-field:focus::part(virtual-keyboard-toggle),
math-field:focus::part(menu-toggle) {
    display: flex;
}

说明 #

• math-field::part(menu-toggle)是Mathlive中菜单切换按钮的part名称，和虚拟键盘按钮一起处理就能实现你要的“仅获焦时显示两个按钮”的效果
• 确保选择器是math-field:focus::part(...)，把:focus状态和part选择器直接关联在同一个元素上，而不是嵌套选择

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