CSS:我可以选择大于的数据值吗? [英] CSS: Can I select data value greater than?
本文介绍了CSS:我可以选择大于的数据值吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
<div data-age="30">30</div>
有一种方法可以让(PURE CSS)div在<18岁时显示为红色,而在> 18岁时显示为蓝色
Is there a way to have (PURE CSS) div in red when age<18 and in blue where age>18
推荐答案
这是基于此先前答案的想法您可以在其中考虑CSS变量的地方:
Here is an idea based on this previous answer where you can consider CSS variables:
.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>
这篇关于CSS:我可以选择大于的数据值吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文