Firefox 124：如何在 userChrome.css 中更改活动选项卡的背景颜色？

Question

附加到 userChrome.css 的以下代码不再有效：

.tab-background[selected="true"] {
    background-color: #dd9933 !important;
    background-image: none !important;
}

我在网上能找到的所有东西，包括这个网站和reddit，都推荐了这个，但没有效果。活动选项卡是比其他选项卡深一点的灰色阴影，而不是我在这里定义的橙色。

我不是一个有视力障碍的人，但即使对我来说，也很难在大量非活动选项卡中辨认出活动选项卡，因为颜色仅相差 5% 左右。

令人沮丧的是，Mozilla 不断改变这些 CSS 设置，一个月前有效的设置在下个月就毫无理由地被破坏了。有人知道今天的 CSS 是什么吗？

Answer 1

这应该可以解决问题

.tab-background[selected] {
    background-color: #dd9933 !important;
    background-image: none !important;
}

Answer 2

也许活动选项卡的 CSS 选择器已随新的 Firefox 版本而更改。

许多人不知道的是，您可以使用开发工具检查浏览器本身，就像检查网页及其 DOM 一样；它被称为 Firefox 中的浏览器工具箱。

在检查器中查看右侧元素后，您将能够看到该元素、它的属性和应用的 CSS 样式。

---

在您的情况下，我建议使用 Firefox 浏览器本身用于设置其活动选项卡样式的属性选择器（如以下屏幕截图所示）：

.tab-background:is([selected], [multiselected])

如果这仍然不起作用，请尝试使用浏览器工具箱自行调试：

• 您的 CSS 文件是否已加载并应用？
• 它真的会覆盖 Firefox 默认应用的 CSS 规则吗？检查您所应用的 CSS 选择器的特异性。