如何为任意背景重叠的span通用设置CSS linear-gradient样式

• 现有2个均配置了background-color属性的span元素，二者为嵌套关系（存在背景重叠），示例HTML代码如下：

<p>Alpha <span class="highlightTopic">Beta <span class="highlightYellow">Gamma Delta</span> Epsilon</span> Eta</p>

配套基础样式代码如下：

span.highlightYellow {
  background-color: rgba(255, 237, 0, 0.5);
}

span.highlightTopic {
  background-color: rgba(182, 203, 232, 0.5);
}

• 为让重叠区域同时展示两种背景色，目前已尝试两种实现方案：
  1. 设置opacity：上述代码已通过rgba透明度参数实现该效果
  2. 为重叠区域设置linear-gradient，对应CSS代码如下：

span.highlightTopic span.highlightYellow,
span.highlightYellow span.highlightTopic {
  background: linear-gradient(-7deg, rgba(255, 255, 0, 0.5) 50%, rgba(182, 203, 232, 0.5) 50%);
}

• 上述2个span的实现效果可参考效果截图：
  

• 如果页面中存在更多带背景色的span元素（例如共10个），手动枚举所有两两嵌套的选择器组合需要编写45条样式规则——10个元素的两两组合数为C(10,2)，即从1累加到9的和等于45，需要为每一种类名组合重复编写上述渐变样式规则，维护成本极高。
  这类手动编写的冗余规则示例如下：

span.highlightTopic span.highlightYellow,
span.highlightYellow span.highlightTopic {
  background: linear-gradient(-7deg, rgba(255, 255, 0, 0.5) 50%, rgba(182, 203, 232, 0.5) 50%);
}

• 现寻求通用实现方案：无需手动枚举所有span类名组合，即可自动为任意两个存在背景色重叠的span的重叠区域应用linear-gradient样式。

内容的提问来源于stack exchange，提问作者Nor.Z