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伪类在规范中只是留了个名字，还完全没有内容，估计没那么快支持上。