CSS如何在属性值在定义范围内时设置样式

Question

我建立了一个日历，每一天都是一个列表项。它包含一个带有 data-count 属性的 span 元素。 此属性旨在显示资源的可用性并动态更新。 我想用跨度的背景颜色显示这种可用性。我可以单独管理每个值​​，但我想按范围管理它， 例如，如果数据计数在 [0, 999] 中，则背景为绿色，在 [1000, 9999] 中为橙色，并且 >= 10000 : 红色

有没有办法仅在 css 中进行管理（无需任何额外的 javascript 或 html 更改）？ （如果是的话如何？） 是否有一个 CSS 选择器来获取数据计数在 [0, 999] 范围内的所有跨度？

风格是这样的

li { 
    list-style-type: none;
    display: inline-block;
    width: 18%;
    text-align: left;
    margin-bottom: 5px;
    background: #bbb;
    padding: 5px;
}

li span {
    display: inline-block;
    padding: 5px;
    width: 90%;
}

li span[data-count="50"] {
    background: lime;
}
li span[data-count="5001"] {
    background: orange;
}
li span[data-count="50000"] {
    background: red;
}

这里是html

<ul>
    <li><span data-count="50" >1/1/70 - free</span></li><br>
    <li><span data-count="51" >2/1/70 - free</span></li><br>
    <li><span data-count="5001">3/1/70 - hurry up</span></li><br>
    <li><span data-count="50000">4/1/70 - last chance</span></li>
</ul>

Answer 1

一个想法是否可以用 CSS 变量替换数据值（类似于this answer）

li { 
    list-style-type: none;
    display: inline-block;
    width: 18%;
    text-align: left;
    margin-bottom: 5px;
    background: #bbb;
    padding: 5px;
}

li span {
    display: inline-block;
    padding: 5px;
    width: 90%;
    background:
      /* from 10000 to infinity */
      linear-gradient(red,red)      0 /100% calc((var(--count) - 9999)*1px),
      /* from 1000 to 9999*/
      linear-gradient(orange,orange)0 /100% calc((var(--count) - 999)*1px),
      /* from 0 to 999*/
      green; 
}

<ul>
    <li><span style="--count:50" >1/1/70 - free</span></li>
    <li><span style="--count:51" >2/1/70 - free</span></li>
    <li><span style="--count:5001">3/1/70 - hurry up</span></li>
    <li><span style="--count:50000">4/1/70 - last chance</span></li>
</ul>