给定情况
1。
假设我有2个跨度，都带有 background-color ，一个在另一个跨度（重叠）：
<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);
}
2。
它们是重叠，但我希望能够看到两个 background-color ，因此我应用
opacity （应用，请参见上文）-
（请参见下文）
>关于重叠的背景色
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%);
}
。
html输出：
jsfiddle：script
问题
4。
现在可以说，有10个跨度有10个跨度。
然后，我的CSS样式的每种组合的数量将为45 （$$ 10：ncr：2 = \ sum _ {n = 1}^{10-1} n = 45 $$） 。
IE：我需要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%);
}
=＆gt;
5。
因此，如何将线性分级 css应用于通常任何2 跨度具有 background-color 重叠与每个跨度其他？
（没有指定45种不同的组合。）
Given Situation
1 .
Say I have 2 spans, both with background-color, and one is inside another (overlapped):
<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);
}
2 .
They are overlapped, but I want to be able to see both background-color, so I apply
opacity (applied, see above)linear-gradient (see below)
for the overlapped background-color
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%);
}
3 .
html output:
jsfiddle: script
Problem
4 .
Now lets say, there is more than 2 spans, say 10 spans.
Then the number of my css style for each combination of them will be 45 ($$10:nCr:2 = \sum _{n=1}^{10-1}n = 45$$).
ie: I need 45 of this
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%);
}
=>
5 .
So, How to apply linear-gradient css to generally any 2 spans that have background-color overlapped with each other?
(Without specifying 45 different combinations of them.)
发布评论
评论（2）
解决方案（解决方法）
jsfiddle：突出显示背景颜色重叠（soln）
1。
您需要一个
Master类（CSS样式规则）2。
将附加
主类添加到元素3中的每个中的每个中。
3 .1
将变量
添加到Master Class;3 .2
并使用该
- color-main分配颜色，用于突出显示的所有CSS样式规则（而不是使用background> Background-color）4。
4 .1
选择
外部跨度＆amp;的颜色将其分配给- color-main-outerspan4 .2
通过使用
var（ - color-main）＆amp;var（ - color-main-outerspan）限制＆amp;注意::
这可能仅适用于两种颜色
p＆gt; Span.hlbackgroundms用于选择外跨度，该范围仅限于某些情况span.hlbackgroundms：has（＆gt; span.hlbackgroundms）可能会更好，如果您的浏览器支持：has（）））更多嵌套（LV 3+）
span可能无法正常工作逻辑不容易遵循（可能有更好的方法）
您可以使用具有0透明度的alpha（简单地工作）
纯CSS（您也可以使用JS来实现此目标）
思考过程::
全部要点是：_
能够从
（parent）（parent）外部跨度＆amp;（儿童）内跨度选择
内跨度，然后将这两种颜色分配给线性级别IT。=＆gt;
能够从（内部/外部跨越）CSS样式规则
中选择颜色
- ＆gt;您需要使用变量
- color-main才能与CSS样式规则一起与DIFF共享变量
righlightContentObject之间共享＆amp;righlighttechstack），- ＆gt;您需要为该元素使用其他主类
span.hlbackgroundms（存储该变量- color-main））
区分2个差异颜色（而不是仅选择
内跨度's- color-main始终）- ＆gt;您需要使用另一个变量
- color-main-outerspan来存储外部跨度的颜色
- ＆gt;您需要区分“外部”＆amp; “内”第一个
- ＆gt;
p＆gt; span.hlbackgroundms＆lt; =＆gt;外部span.hlbackgroundms＆gt; span.hlbackgroundms＆lt; =＆gt;内部（逻辑全部设置，分配值）
（update）
span 获得更多嵌套，您可以尝试消除以下技巧。
（尽管筑巢变得越来越复杂，这些技巧的可靠性就越少了...）
更新：
prev更新CSS规则很差
添加4个解决方案：1 in JavaScript，3 in（pure）CSS
原始思维过程是以下3个CSS方法的基础
JS [V1/V2-M2]
@Logic ::（直接向前）
每个内部循环
.hlbackgroundmselement存储
背景色来自同一（垂直）分支中的所有prev父元素使用这些
background-color分配
线性级别css规则@note ::
您可能需要更改代码中的某些参数，以适合您自己的情况，尤其是
.hlbackgroundms＆amp;'线性级别（-1DEG'（未提供示例源代码（我的测试用例太多））
（下面的核心源代码未清理草稿评论）
解决方案CSS [V2-M3]（不推荐使用）
解决方案CSS [V2-M4]（推荐）
解决方案CSS [V2-M5]
Solution (workaround)
jsfiddle: Highlight Background color Overlap (soln)
1 .
you need a
Master class(Css Style Rule)2 .
add the additional
Master classto each of the element3 .
3 .1
add a variable
--color-mainto theMaster class;3 .2
and use that
--color-mainfor assigning colors, for all the Css Style Rules that were using for highlighting (instead of usingbackground-color)4 .
4 .1
pick the color of the
outer span& assign it to--color-main-outerspan4 .2
assign the 2 colors to
linear-gradientby usingvar(--color-main)&var(--color-main-outerspan)limitations & notes::
this may only works for 2 colors
p > span.hlBackgroundMsis used to pick theouter span, which is limited to certain casesspan.hlBackgroundMs:has(> span.hlBackgroundMs)might be better, if your browser supports:has())more nested (lv 3+)
spanmay not workthe logic is not easy to follow (there might be a better way)
you may just use an alpha with 0 transparency (to simply the work)
pure css (you may use js to achieve this too)
thinking process::
the whole point is to:_
being able to pick the color from the
(parent) outer span& the(child) inner spanselect the
inner span, then assign those 2 colors tolinear-gradientof it.=>
to be able to pick color from alongside (inner/outer span's) Css Style Rule
-> you need to use a variable
--color-mainto be able to share the variable with diff alongside Css Style Rule
highlightContentObject&highlightTechStack),-> you need to use an additional Master class
span.hlBackgroundMsfor that element, (to store & share that variable--color-main)to be able to distinguish the 2 diff color (instead of just picking the
inner span's--color-mainall the time)-> you need to use another variable
--color-main-outerspanto store the color from theouter spanto be able to "store the color from the
outer span"-> you need to distinguish the "outer" & "inner" first
->
p > span.hlBackgroundMs<=> outerspan.hlBackgroundMs > span.hlBackgroundMs<=> inner(logic all set, assign the values)
(update)
As the
spangets more nested, you may try out the below tricks.(though, as the nesting gets more complicated, the less reliable are these tricks...)
(the point is to get the color from
outer span)update:
prev updated css rule is pretty bad
add 4 more solutions: 1 in Javascript, 3 in (pure) Css
the original thinking process is the base of following 3 css methods
solution js [V1/V2-M2]
@logic:: (straight forward)
loop inside each
.hlBackgroundMselementstore the
background-colorfrom all prev parent elements in the same (vertical) branchassign
linear-gradientcss rule to each element, using thosebackground-color@note::
you may need to change some of the parameters in the code, to suit your own case, especially
.hlBackgroundMs&'linear-gradient(-1deg'(example source code is not provided (my test cases are bit too many))
(following core source code are left with draft comments not cleaned up)
solution css [V2-M3] (not recommended)
solution css [V2-M4] (recommended)
solution css [V2-M5]
您可以在任何跨度上提供一堂课，并给他们样式
you can give one class for any span and give them styles