Question

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

是否有办法根据价值设置这些数字的样式，即将数字设为0％ - 100％为绿色，数字为101％＆gt;红色

请注意，我无法访问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

如果您可以将百分比＆lt; 100％设置为以099％开头，则可以使用attr开头和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多个变种做一个选择器，这是一个很长的啰嗦

Answer 2

因为，对所涉及的值进行了评估，所以不能用CSS来完成。

但是，Javascript可能会做你想要的。

Answer 3

我也不相信目前只使用CSS是不可能的...我建议定义两个CSS类“绿色”和“红色”（或相应的）并在JavaScript或PHP中进行小的评估将类分配给元素......

很抱歉，但这需要访问任何类型的HTML。

Answer 4

这实际上取决于您想要选择的HTML元素的种类和结构。如果您只有<span>或<td>个元素而没有任何语义结构，那么它将无效。

但如果您碰巧拥有title，class等属性，那么您可以做某事。像这样：

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

根据CSS项的值来设置CSS项的样式

4 个答案: