造型取决于它的价值CSS项目 [英] Styling a CSS item depending on it's value

问题描述

我有通过到200％的范围内从0％的百分比的列表。

I have a list of percentages that range from 0% through to 200%.

有没有办法样式这些数字取决于他们的价值，即让数字0％ - 100％为绿色和数字101％>红色

Is there a way to style those numbers depending on their value i.e. make numbers 0% - 100% be green and numbers 101% > red?

请注意，我没有访问HTML这一点，只是CSS。

Please note, I don't have access to the HTML for this, just CSS.

由于提前，

汤姆·帕金斯

编辑：

有问题的HTML内容如下：

The HTML in question reads:

    <td class="HtmlGridCell" colspan="5" align="Left"> </td>
    <td class="HtmlGridCell" colspan="2" align="Left"><span class="progress" title="303%"><span class="indicator warning" style="width: 100%;"> </span></span></td>

和CSS的内容如下：

@-moz-document url("https://customstudio.workflowmax.com/job/joblist.aspx") {
.progress:after {
content: attr(title);
font-size: 14px;
position: relative;
left: 122px;
top: -27px;
float: left;
color: #666;
background-color: #efefef;
-moz-border-radius: 4px;
padding: 5px;
border: 1px solid #cfcfcf;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

希望有所帮助。

推荐答案

如果你可以设置百分比和小于100％，开始与0喜欢099％，你可以使用ATTR开头和Attr等于选择。作品在现代浏览器和IE 7 +

If you could set the percentages <100% to start with a 0 like 099% , You could use the attr starts with, and attr equals selector. Works in modern browsers and ie 7 +

 .progress[title^=1], .progress[title^=2] { background: red; } /* Starts with 1 or 2*/
 .progress[title^=0], .progress[title=100%], { background: green; } /* Starts with 0 or is 100% */

另外，你可以做一个选择你都200多变化，这是相当长篇大论

Alternatively you could make a selector for all 200 odd variations you have , which is quite long winded

这篇关于造型取决于它的价值CSS项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！