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。