背景根据两个 2 个元素的间隔，可以相对于彼此处于任何位置

问题描述 投票：0回答：1

元素只是很多 

<span>
兄弟姐妹，两个间隔由类决定 
a1
/
a2
/
b1
/
b2
:

  • [
    a1
    , 
    a2
    ) 中的元素应该具有一种颜色的背景，比如绿色，
  • [
    b1
    , 
    b2
    ) 中的元素应具有一种颜色的背景，例如洋红色，
  • 洋红色应优先出现在重叠区域，
  • 其余所有内容都应具有 
    initial
    背景。

这是一个简化的示例，其中我实际上针对两个间隔 [

border-top
, 
border-bottom
) 和 [
a1
, 
a2
) 的不同属性 (
b1
/
b2
):

* {
  background-color: black;
  color: white;
}
div {
  padding: 0.5em 0;
}

span.a1,
.a1 ~ span {
  border-top: 3px solid green;
}

span.a2,
.a2 ~ span {
  border-top: none;
}

span.b1,
.b1 ~ span {
  border-bottom: 3px solid magenta;
}

span.b2,
.b2 ~ span {
  border-bottom: none;
}
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>

四个规则就足够了，因为它们允许指定两个间隔中的每一个的开始和结束位置。

但是，如果两个区间必须针对同一属性 

background
，则一切都会变得更加复杂，因为特异性开始变得非常重要。

根据上述要求，我可以推断出

  • 设置
    background-color: magenta;
    的选择器的特异性必须高于设置
    background-color: green;
    的选择器；
  • 为洋红色间隔设置 
    background-color: initial;
    的选择器的特异性必须高于单个设置 
    background-color: magenta;
    ,
  • 同样，为绿色间隔设置
    background-color: initial;
    的选择器的特异性必须高于设置
    background-color: green;
    ，

但是必须有一些用于设置 

background-color: green
/
magenta;
的规则，该规则对 
background-color: initial;
中的规则设置具有更高的特异性，以便允许每个间隔在另一个间隔之后开始。

这里和下面是两个间隔的所有可能的排列（使用 

border-top
/
border-bottom
属性显示）：

* {
  background-color: black;
  color: white;
}
div {
  padding: 0.5em 0;
}

/* borders */
span.a1,
.a1 ~ span {
  border-top: 3px solid green;
}

span.a2,
.a2 ~ span {
  border-top: none;
}

span.b1,
.b1 ~ span {
  border-bottom: 3px solid magenta;
}

span.b2,
.b2 ~ span {
  border-bottom: none;
}
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2 b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1 b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2 b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1 b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2 b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2 b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1 b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2 a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>

html css css-selectors css-specificity
1个回答
0
投票

这是我目前找到的解决方案，如果我没记错的话，它的最大特异性为 4：

* {
  background-color: black;
  color: white;
}
div {
  padding: 0.5em 0;
  
  --magenta-50: rgb(255, 0, 255);
  --magenta-100: rgb(155, 0, 155);
  --green-50: rgb(0, 255, 0);
  --green-100: rgb(0, 155, 0);
}

span.a1,
.a1 ~ span {
  border-top: 3px solid var(--green-50);
}

span.a2,
.a2 ~ span {
  border-top: none;
}

span.b1,
.b1 ~ span {
  border-bottom: 3px solid var(--magenta-50);
}

span.b2,
.b2 ~ span {
  border-bottom: none;
}

span.a1,
.a1 ~ span {
  background-color: var(--green-100);
}

span.a2,
.a2 ~ span {
  background-color: initial;
}

.a1 ~ span.b2,
.a1 ~ .b2 ~ span {
  background-color: var(--green-100);
}

.a1 ~ .a2 ~ span.b2,
.a1 ~ .a2 ~ .b2 ~ span {
  background-color: initial;
}

span.b1,
.b1 ~ span {
  background-color: var(--magenta-100);
}

.b2 ~ span.a1,
.b2 ~ .a1 ~ span {
  background-color: var(--green-100);
}

.b2 ~ span.a2,
.b2 ~ .a2 ~ span,
span.b2,
.b2 ~ span,
span.b2.a2,
.b2.a2 ~ span {
  background-color: initial;
}

span.b2.a1,
.b2.a1 ~ span {
  background-color: var(--green-100);
}

.b2 ~ span.a2,
.b2 ~ .a2 ~ span {
  background-color: initial;
}
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2 b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1 b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2 b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1 b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2 b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2 b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1 b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2 a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>
<div><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="b2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a1">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span class="a2">c</span><!--
--><span>c</span><!--
--><span>c</span><!--
--><span>c</span>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.