根据值设置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;
}

希望这有所帮助。

- Tom Perkins

---

你所提到的是哪种HTML元素？ - Sarfraz

你应该展示你的代码，这样我们才能更好地帮助你，否则任何答案都只是猜测。 - Kyle

Answer 1

如果您希望百分比小于100%以0开头，例如099%，您可以使用属性开始和属性等于选择器。这在现代浏览器和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多个变量创建一个选择器，但这相当冗长。

- Blowsie

---

没问题，这是一些关于属性选择器有用的信息：http://css-tricks.com/attribute-selectors/ - Blowsie

Answer 2

这取决于您想选择的HTML元素的类型和结构。如果您只有没有任何语义结构的或元素，它将无法工作。

但是，如果您有像title、class等属性，您可以像这样做：

span[attributeName="attributeValue"] {color: #FF0000}

- Munneson

Answer 3

由于涉及值的评估，这不能通过 CSS 完成。

但是，JavaScript 可以做到您想要的。

- Sathish Manohar

Answer 4

我也不相信目前只使用CSS就没有可能性...我建议定义两个CSS类别 "green" 和 "red"（或对应的名称），并在JavaScript或PHP中进行小型评估以将类别分配给元素...

抱歉，但这需要以任何形式访问HTML。

- poeschlorn