CSS：我可以选择大于的数据值吗？答案

【问题标题】：CSS: Can I select data value greater than?CSS：我可以选择大于的数据值吗？
【发布时间】：2020-07-04 06:18:31
【问题描述】：

<div data-age="30">30</div>

有没有办法让（PURE CSS）div 在年龄18 时为蓝色

【问题讨论】：

没有。数据属性是字符串而不是值
您必须合并 JQuery 或 JavaScript。但这并不难。
使用 CSS 时，您需要一些选择器：示例开始于：div[data-age]/* + 1-9 */ {color:red} div[data-age="19"], div[data-age^="2"]/* 20's */ /* etc ... */ {color:initial}
这里是一个例子codepen.io/gc-nomade/pen/zYGmYZo（点击代码所在位置右上角的箭头，然后点击查看已编译的 HTML 或 CSS 以复制生成的 html 或 css）

标签： css css-selectors

【解决方案1】：

这是一个基于this previous answer 的想法，您可以在其中考虑 CSS 变量：

.box {
  font-size:30px;
  padding:5px;
  display:inline-block;
  font-family:monospace;
  overflow:hidden;
  color:#fff;
  background:
     linear-gradient(red,red) 0 0/100% calc((18 - var(--a))*1px),
     blue;
}
.box:before {
  content:attr(style);
  text-indent:-4ch;
  display:inline-block;
}

<div style="--a:30" class="box"></div>
<div style="--a:18" class="box"></div>
<div style="--a:9 " class="box"></div>
<div style="--a:17" class="box"></div>
<div style="--a:0 " class="box"></div>

你也可以为文字着色：

.box {
  font-size:30px;
  padding:5px;
  display:inline-block;
  font-family:monospace;
  overflow:hidden;
  border:5px solid transparent;
  background:
     linear-gradient(#fff,#fff) padding-box,
     linear-gradient(red,red) 0 0/100% calc((18 - var(--a))*1px),
     blue;
}
.box:before {
  content:attr(style);
  text-indent:-4ch;
  display:inline-block;
  color:transparent;
  background:
     linear-gradient(red,red) 0 0/100% calc((18 - var(--a))*1px),
     blue;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div style="--a:30" class="box"></div>
<div style="--a:18" class="box"></div>
<div style="--a:9 " class="box"></div>
<div style="--a:17" class="box"></div>
<div style="--a:0 " class="box"></div>

【讨论】：