如何在 CSS 规则集（Firefox 网络浏览器用户界面）中覆盖这个单一选择器？

Question

Firefox 89 包含对 Web 浏览器 UI 的许多更改。

新 UI 的一个好处是选项卡可以显示辅助信息行以指示，例如，媒体是否正在选项卡中播放。

不幸的是，当使用非常理想的紧凑模式时，这些次要信息行消失了。

我查看了 Firefox 源代码，确定此问题是由这行 CSS 代码造成的：

:root[uidensity="compact"] .tab-secondary-label, .tab-secondary-label:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), .tab-secondary-label:not([activemedia-blocked]) > .tab-icon-sound-blocked-label, .tab-secondary-label[muted][activemedia-blocked] > .tab-icon-sound-blocked-label, .tab-secondary-label[activemedia-blocked] > .tab-icon-sound-playing-label, .tab-secondary-label[muted] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-muted-label, .tab-secondary-label:not([pictureinpicture]) > .tab-icon-sound-pip-label, .tab-secondary-label:not([muted]) > .tab-icon-sound-muted-label, .tab-secondary-label:not([showtooltip]) > .tab-icon-sound-tooltip-label, .tab-secondary-label[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
    display: none;
}

如您所见，此规则集开头的选择器 :root[uidensity="compact"] .tab-secondary-label 导致了此问题。

我想在 userChrome.css 叠加层中添加一个 CSS 规则集来解决这个问题，但我不确定如何解决。是的，我可以在 Firefox 源代码中更改此规则集，然后重新编译浏览器，但我不想在每次 Firefox 更新时都经历这些麻烦。

在 userChrome.css 内，出于显而易见的原因，类似于：

:root[uidensity="compact"] .tab-secondary-label {
    display: revert !important;
}

或

:root[uidensity="compact"] .tab-secondary-label {
    display: unset !important;
}

不太行。

什么是好的 CSS 技术可以用来实现这个目标？

Answer 1

我找到了解决办法。

我不喜欢它，但它确实有效。

.tab-secondary-label {
    display: -moz-box !important;
}

.tab-secondary-label:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), .tab-secondary-label:not([activemedia-blocked]) > .tab-icon-sound-blocked-label, .tab-secondary-label[muted][activemedia-blocked] > .tab-icon-sound-blocked-label, .tab-secondary-label[activemedia-blocked] > .tab-icon-sound-playing-label, .tab-secondary-label[muted] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-playing-label, .tab-secondary-label[pictureinpicture] > .tab-icon-sound-muted-label, .tab-secondary-label:not([pictureinpicture]) > .tab-icon-sound-pip-label, .tab-secondary-label:not([muted]) > .tab-icon-sound-muted-label, .tab-secondary-label:not([showtooltip]) > .tab-icon-sound-tooltip-label, .tab-secondary-label[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
    display: none !important;
}

如果有人可以提出不同的技术，我有兴趣阅读您的回答。

如何在 CSS 规则集（Firefox 网络浏览器用户界面）中覆盖这个单一选择器？

How to override this single selector within a CSS ruleset (Firefox web browser user interface)?

css

user-interface

firefox

user-experience

userchrome.css