CSS根据数据显⽰样式
在低版本IE时代，我们想让数据根据其值显⽰不同的样式可能需要直接从服务器端输出时为不同的数据添加相应的class。但现在，通过属性选择器+伪元素+属性选择符，这三个东西混合使⽤就可以让数据根据其值以不同的样式显⽰，不需要再从程序控制样式。
现在有⼀堆数据，正数表⽰盈利，负数表⽰亏损。通常我们需要从服务器上做各种判断，然后⽣成不同的HTML原始源输出到客户端。当然⼀些程序也会使⽤前端的JavaScript来控制这些数据的显⽰。但⽆论如何，使⽤程序控制数据的样式还是太不⽅便了。既然只是样式控制，我们就应该完全交给CSS来完成。⽐如下⾯的代码：<style>
div {width:100px;text-align:right;}
[data-value] {color:green;font:12px/1.5 宋体;}
[data-value]:after {content:' 'attr(data-value) ' 元';}
[data-value^='-'] {color:red;}
[data-value]:before {content:'盈利';}
[data-value^='-']:before {
position:relative;background:#FFF;
content:'亏损';margin-right:-1em;padding-right:0.5em;
}
</style>
<div data-value="696.72"></div>
<div data-value="-364.88"></div>
<div data-value="679.49"></div>
<div data-value="203.23"></div>
<div data-value="-155.65"></div>
这样数据的样式就可以不再使⽤程序来控制了，⽽且这个代码兼容到IE8。
这个例⼦虽然只说正负值的选择，实际上稍微复杂的数据也可以这样筛选出来并设置样式。只是由于属性选择器仅⽀持元素属性，所以数据需要默认以属性的形式设置。显⽰可以通过在::before和::after伪元素中使⽤attr关键字来引⽤（注意这可能对搜索引擎不友好）。如果以后可以⽀持内容选择的话也许使⽤起来会更⽅便，但是⽬前:contains伪类在规范中只是留了个名字，还完全没有内容，估计没那么快⽀持上。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论