请帮忙修复下 ’https协议地址栏变色‘ 样式

/*Https协议地址栏变色*/
#urlbar[level="low"]{
background-color: #FFFFB7 !important;
}
 
#urlbar[level="high"]{
background-color: #DDF9CC !important;
}
 
#urlbar[level="broken"]{
background-color: #F7DFDF !important;
}

https://bugzilla.mozilla.org/show_bug.cgi?id=1233974#c3 供参考。
怎么弄我不清楚，暂时不明白如何选择父或筛选子元素的属性。

纯css方案目前是没戏了。因为目前界面上能用作区分的是在#urlbar子元素的子元素#identity-box。
由后代元素定位设置先代元素的样式的css语法还处在草案讨论状态，没有任何浏览器支持
最多只能设定#identity-box的同级元素，显示效果并不好

location == 'chrome://browser/content/browser.xul' && gBrowser.addProgressListener({
    state: null,
    lastLocation: null,
    onSecurityChange: function (aWebProgress, aRequest, aState, aIsSimulated) {
        if (this.state == aState 
            && this.lastLocation == gBrowser.currentURI.spec)
        return;
        this.state = aState;
        this.lastLocation = gBrowser.currentURI.spec;
        const wpl = Components.interfaces.nsIWebProgressListener;
        const wpl_security_bits = wpl.STATE_IS_SECURE | wpl.STATE_IS_BROKEN | wpl.STATE_IS_INSECURE;
        var level;
        switch (this.state & wpl_security_bits) {
            case wpl.STATE_IS_SECURE:
                level = 'high';
                break;
            case wpl.STATE_IS_BROKEN:
                level = 'broken';
                break;
        }
        if (level) {
            if (gURLBar) gURLBar.setAttribute('level', level);
        } else {
            if (gURLBar) gURLBar.removeAttribute('level');
        }
    }
});

UC脚本

感谢楼上各位！
贴吧的@柏拉图样图森破  提供的CSS

新版完整：
#urlbar{
position: relative!important;
z-index: 233!important;
}
#identity-box::before {
content: ''!important;
position: absolute!important;
height: 100%!important;
width: 100%!important;
top: 0!important;
right: 0!important
bottom: 0!important;
left: 0!important;
z-index: -1!important
}
#identity-box.weakCipher::before {
background-color: #FFFFB7 !important;
}
#identity-box.verifiedDomain::before {
background-color: #DDF9CC !important;
}
#identity-box.mixedDisplayContent::before {
background-color: #F7DFDF !important;
}