css - CSS:我可以选择大于的数据值吗?
问题描述
<div data-age="30">30</div>
有没有办法让(纯 CSS)div 在年龄<18 时为红色,在年龄>18 时为蓝色
解决方案
这是基于此先前答案的想法,您可以在其中考虑 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>
推荐阅读
- android - 使用 ViewModel 和 Model 进行数据绑定
- javascript - 视频播放器中的视频播放完毕后需要操作
- sql - ERD 软件中外键和关系的奇怪行为,这是 SQL 的工作原理吗?
- php - 如何在 Laravel 中使用 hasManyThrough 关系
- java - Jsoup POST 请求失败。获取 URL 的 HTTP 错误。状态=400
- javascript - 什么都没有时填充表格行
- html - 如何使用免费域和 microsoft expression web 4 创建网站
- javascript - 如何遍历 SQL 数据并使用 ChartJS 绘制图形?
- javascript - jQuery最接近()获取具有特定类或ID的行
- java - 仅使用递归将数字从 1 设置为所选数字