使用userChrome.css修改Firefox扩展图标悬停背景样式失效问题

问题原因 #

原生工具栏按钮和扩展按钮的DOM嵌套结构存在差异：

• 原生按钮的.toolbarbutton-icon是按钮节点的直接子元素，最初写的*:hover > .toolbarbutton-icon规则用了直接子选择器>，只能匹配到原生按钮
• WebExtension扩展的图标节点外多嵌套了一层容器，直接子选择器无法命中；如果去掉>改用全范围后代选择器，会在整条工具栏等顶层父元素触发hover时匹配到所有下属图标，出现全图标同步变色的异常效果。

正确实现代码 #

原有基础图标样式不需要改动，替换掉之前错误的悬停规则即可：

/* 基础图标样式 保持原有配置 */
.toolbarbutton-icon
{
   border-radius: 5px !important;
   box-shadow: 0px 1px 1px 1px black, 0 -0.01em 1px 0px #D0D0D0 !important;
   background-color: var(--uc-regular-colour) !important;
   width: 26px !important;
   height: 26px !important;
   padding: 5px !important;
}

/* 统一悬停变色规则 同时覆盖原生按钮+所有扩展按钮 */
.toolbarbutton-1:hover .toolbarbutton-icon,
.webextension-browser-action:hover .toolbarbutton-icon {
    background-color: green !important;
}

/* 可选：如果扩展按钮悬停时仍有默认灰色背景残留，添加这行清除默认样式 */
.webextension-browser-action:hover .toolbarbutton-badge-stack {
    background-color: transparent !important;
}

规则说明 #

• 选择器直接命中两类可点击的工具栏按钮本体作为hover触发源，不会出现鼠标未指向按钮时全栏图标变色的问题
• 不需要针对单个扩展单独写适配规则，所有安装的扩展图标都能统一触发悬停变色效果

问题效果参考 #

• 悬停原生设置图标（规则生效）：
• 悬停隐私浏览图标（规则生效）：
• 悬停FoxyProxy扩展图标（原规则不生效）：
• 错误后代选择器导致全图标变色：

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