css - 根据它的值设置 CSS 元素的样式

Question

我有一个范围从 0% 到 200% 的百分比列表。

有没有一种方法可以根据它们的值来设置这些数字的样式，即让数字 0% - 100% 为绿色，而数字 101% > 红色？

请注意，我无权为此访问 HTML，只能访问 CSS。

提前致谢

汤姆·珀金斯

编辑:

有问题的 HTML 内容如下:

    <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;
}

希望对您有所帮助。

Answer 1

如果您可以将百分比设置为 <100% 以 0 开头，例如 099% ，您可以使用 attr starts with, and attr equals 选择器。适用于现代浏览器，即 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 种奇怪的变体制作一个选择器，这是相当冗长的