将固定的CSS声明应用于其他元素

Question

基本前提是我们将一个CSS字符串保存在数据库中作为网站的自定义。

我无法更改此字符串，并且需要应用于不同元素的颜色。

为了这个问题，让我们将CSS字符串简化为：

.navbar-item:not(.navbar-brand):not(.active){
    background-color:#2795EE;
}

.navbar-item:not(.navbar-brand):not(.active):hover{
    background-color:#f18c16;
    color:inherit;
}

我更改了子导航的结构，现在已将.navbar-item应用于父.navbar以及其中的所有项目。这是因为我需要background-color中的.navbar-item应用于导航栏。

问题是，当我将.navbar-item应用于navbar以及导航栏中的每个li时，导航栏的背景会突出显示在孩子的悬停上{{1元素。

这个jsfiddle几乎可以肯定地证明这个问题比我能解释的更好：https://jsfiddle.net/dbrotuwt/1/。

我希望能够创建一个新类，并将li中声明的样式应用于它：

.navbar-item

但是根据我的研究，我知道如果不使用更少或类似的东西，这是不可能的，我不能这样做。

我认为可以使用jQuery，但如果可能的话，我更喜欢纯CSS解决方案。